Ранее этим летом я начал учиться в школе Flatiron, чтобы стать инженером-программистом. После мучительных размышлений я понял, что пришло время моей карьере школьного учителя подойти к концу. За принятием этого невероятно сложного решения последовала не менее трудная дилемма: что теперь? Я прочитал статью о матери-одиночке, которая боролась с трудностями в качестве основного работника, затем посетила учебный курс по программированию и теперь могла работать удаленно и гораздо легче совмещать работу и воспитание детей. Изучив и решив, что это мне подходит, я подал заявку, заплатил деньги, сделал предварительную работу, и вот я здесь.
Дела поначалу шли как по маслу. До того, как начать работать во Flatiron, я сделал несколько начальных уроков по The Odin Project, а также прошел курс адаптивного веб-дизайна на FreeCodeCamp.org. Я смог относительно легко ориентироваться в подготовительном курсе и первой половине Фазы 1. Потом, по какой-то причине, я ударился о стену. Я не знаю, то ли я недостаточно хорошо усваивал материал, то ли двигался слишком быстро, но где-то в середине лета я столкнулся с несколькими трудностями, из-за которых мне показалось, что я вообще ничему не научился. !
Ниже приведено первое упражнение, с которым я столкнулась с большими трудностями, взятое из учебных материалов моей школы:
Если вы откроете index.html в браузере, вы найдете небольшое приложение. У него есть несколько особенностей:
Счетчик, который увеличивается на 1 каждую секунду
Кнопки "Плюс" и "Минус", которые увеличивают или уменьшают значение счетчика
Кнопка «Мне нравится» (❤️), которая добавляет «Мне нравится» для числа, которое в данный момент отображается на таймере
Поле комментариев, которое добавляет комментарии при отправке
Задача состоит в том, чтобы перепроектировать эти функции и создать их самостоятельно, используя то, что вы узнали о JavaScript и манипулировании DOM.
Исходя из этих заданных параметров, мои результаты были такими (примечание: эти результаты написаны в форме пользовательских историй. Они описывают функции с точки зрения пользователя, когда он посещает страницу):
Как пользователь я могу:
- Следите за тем, как таймер увеличивается каждую секунду после загрузки страницы.
- Вручную увеличивайте и уменьшайте значение счетчика с помощью кнопок "плюс" и "минус".
- "Нравится" отдельный номер счетчика. Я должен увидеть количество отметок «Нравится», связанных с этим отображаемым числом.
- Приостановить счетчик, который должен 1. приостановить счетчик, 2. отключить все кнопки, кроме кнопки паузы, и 3. изменить метку на кнопке с «пауза» на «возобновить»
- Нажмите кнопку «Перезапустить», чтобы перезапустить счетчик и снова активировать кнопки.
- Оставлять комментарии к моей игре, например: "Вау, какая это забавная игра".
В рамках этого поста я сосредоточусь на первых трех пунктах списка. Это заняло у меня несколько часов!
Мне удалось создать таймер достаточно легко, с помощью некоторых стандартных PGC (молитвы, гугление и проклятия). Создание функции счетчика приращения и уменьшения оказалось намного сложнее.
Прежде чем углубиться в JavaScript, вот html для приложения, который был создан для нас нашей школой:
<html>
<head>
<meta charset="UTF-8">
<title>Dom Challenge</title>
<style>
#counter {
background-color: black;
color: white;
display: table;
padding: 10px;
}
</style>
</head>
<body>
<h1>
Welcome to the DOM Challenge
</h1>
<h1 id='counter'>
0
</h1>
<button id='minus' > ➖ </button>
<button id='plus' > ➕ </button>
<button id='heart' > ❤️ </button>
<button id='pause' > pause </button>
<ul class='likes'></ul>
<div>
<h3>Comments</h3>
<div id='list' class='comments'></div>
<h3>Leave a comment</h3>
<form id="comment-form" action="">
<input type='text' name="comment" id="comment-input" cols="30" rows="10">
</br>
<button id='submit'>submit</button>
</form>
</div>
<!-- <script src="js/index.min.js"></script -->
<script src="js/challenge.js"></script>
</body>
</html>
Я просто включаю его здесь в качестве ссылки на мои методы JavaScript ниже. CSS для этой лаборатории был минимальным, поэтому я не буду включать его в это обсуждение.
Вот мой код JavaScript для функции счетчика:
Во-первых, мне сказали, что JavaScript вежливо указывать ваши переменные в начале вашего кода:
//Creating variables to use in the counter functions
const counterDisplay = document.getElementById('counter');
const counterMinus = document.getElementById('minus');
const counterPlus = document.getElementById('plus');
const clickLike = document.getElementById('heart');
const makeList = document.querySelector('.likes');
В данном случае мы уделяем особое внимание переменной «счетчик». Затем я хотел создать функцию обратного вызова, которая запускала бы счетчик при загрузке содержимого. Для новичков в программировании, таких как я, помните, что значение «1000» — это 1000 миллисекунд, следовательно, 1 секунда. ParseInt был введен после того, как я понял, что элемент ‹h1› в html читал «0» как строку, а не значение.
Оттуда было так же просто, как объявить функцию обратного вызова (myCallback) и попросить ее увеличиваться на значение 1 каждую секунду:
let count = parseInt(counterDisplay.textContent);
//Creating function that will start at 0, and start counting up by 1 upon loading/refreshing the page
let intervalID = setInterval(myCallback, 1000);
function myCallback() {
//console.log(counterDisplayBegin.textContent);
counterDisplay.innerHTML = count++;
//console.log(count);
}
Я был очень горд собой, что диагностировал первоначальную проблему со своим счетчиком, поняв, что ‹h1› был строкой. Разве я не гордый маленький отладчик! Плавное плавание с этого момента, верно? Ну… не так уж и много.
Теперь пришло время добавить функциональность для увеличения или уменьшения текущего значения счетчика одним нажатием кнопки. Мне нужно было добавить прослушиватели событий, которые выполняли бы эту функцию, но по какой-то причине я не мог заставить кликер работать.
Моя первоначальная попытка была такой:
const incrementCounter = () => {
const likeElement = document.createElement('li');
makeList.appendChild(likeElement);
if (arrayOfNumbers.includes(count)) {
const valueMatch = arrayOfObjects.find((object) => object.number === count);
valueMatch.likes++;
likeElement.textContent = `${count} has been clicked ${valueMatch} times.`
} else {arrayOfObjects.push({number: count, likes: 1});
likeElement.textContent = `${count} has been clicked 1 times.`
}
}
for (value of arrayOfObjects) {
arrayOfNumbers.push(value[number]);
}
Однако по какой-то причине счетчик не инициализировался. После еще нескольких PGC (молиться, гуглить, ругаться) я связался с одним из наших технических тренеров, и мы приступили к устранению неполадок. То, что обычно занимает около 10 минут, перешло ко мне, двум техническим тренерам и почти 2 часам проб и ошибок!
Одной из первых проблем было то, что кнопки увеличения и уменьшения не работали. Один из моих технических тренеров предложил попробовать создать несколько массивов для хранения текущего значения таймера при каждом нажатии кнопки увеличения или уменьшения. Я думал, что мы могли бы использовать это для записи количества лайков, сравнивая значение, хранящееся в нашем массиве объектов, с текущим количеством лайков.
С помощью я в конце концов заставил кнопки увеличения и уменьшения работать, но кнопка «Нравится» не записывала лайки, если одно и то же значение было «лайкано» более одного раза:
const incrementCounter = () => {
for (value of arrayOfObjects) {
arrayOfNumbers.push(value.number);
};
if (arrayOfNumbers.includes(count)) {
const valueMatch = arrayOfObjects.find((object) => object.number === count);
valueMatch.likes++;
const likedElement = document.getElementById(`${count}`);
likedElement.textContent = `${count} has been clicked ${valueMatch.likes} times.`
} else {arrayOfObjects.push({number: count, likes: 1});
const likeElement = document.createElement('li');
likeElement.setAttribute('id', count);
likeElement.textContent = `${count} has been clicked 1 times.`
makeList.appendChild(likeElement);
console.log(likeElement);
}
console.log(arrayOfNumbers);
console.log(arrayOfObjects);
}
clickLike.addEventListener("click",incrementCounter);
Мы пытались создать элемент списка («li») в html и заполнить его литералом шаблона. Мы продолжали сталкиваться с проблемой, когда код не мог обновить счетчик, когда значение понравилось более одного раза. В конечном счете, это был код, который в итоге заработал. Я включил старый неработающий код, который вы можете увидеть закомментированным после инициализации переменной «let currentCount = 0».
//Creating variables to use in the counter functions
const counterDisplay = document.getElementById('counter');
const counterMinus = document.getElementById('minus');
const counterPlus = document.getElementById('plus');
const clickLike = document.getElementById('heart');
const makeList = document.querySelector('.likes');
const likeButton = document.getElementById('heart');
let count = parseInt(counterDisplay.textContent);
//Creating function that will start at 0, and start counting up by 1 upon loading/refreshing the page
let intervalID = setInterval(myCallback, 1000);
function myCallback() {
//console.log(counterDisplayBegin.textContent);
counterDisplay.innerHTML = count++;
//console.log(count);
}
//This is the code for the function for the increment up button
counterPlus.addEventListener("click",() => {
counterDisplay.innerHTML = count++;
console.log(count);
})
//This is the code for the function for the increment down button
counterMinus.addEventListener("click",() => {
counterDisplay.innerHTML = count--;
console.log(count);
})
let currentCount = 0
//This is the code to click likes and record the number of likes.
// const incrementCounter = () => {
// const likeElement = document.createElement("li");
// //const oldCountValue = count;
// //console.log(oldCountValue);
// makeList.appendChild(likeElement);
// //currentCount++;
// likeElement.textContent = `${count} has been clicked ${currentCount} times.`
// //if (numberOfLikes.includes(count))
// };
// const numberOfClicks = [];
// const numberOfLikes = [];
const arrayOfObjects = [];
const arrayOfNumbers = [];
const incrementCounter = () => {
for (value of arrayOfObjects) {
arrayOfNumbers.push(value.number);
};
if (arrayOfNumbers.includes(count)) {
const valueMatch = arrayOfObjects.find((object) => object.number === count);
valueMatch.likes++;
const likedElement = document.getElementById(`${count}`);
likedElement.textContent = `${count} has been clicked ${valueMatch.likes} times.`
} else {arrayOfObjects.push({number: count, likes: 1});
const likeElement = document.createElement('li');
likeElement.setAttribute('id', count);
likeElement.textContent = `${count} has been clicked 1 times.`
makeList.appendChild(likeElement);
console.log(likeElement);
}
console.log(arrayOfNumbers);
console.log(arrayOfObjects);
}
clickLike.addEventListener("click",incrementCounter);
После всего этого я узнал несколько вещей:
- Кодить сложно, но можно.
Когда я был тренером по спорту в старшей школе, я обычно говорил своим ученикам: «Самое лучшее в том, чтобы быть в форме, это то, что каждый день становится немного меньше». Мой опыт здесь ничем не отличается. Несмотря на некоторые «тренировки», которые действительно сложны, я чувствую, что нахожусь в лучшей форме.
2. Держитесь и просите о помощи
В подкасте Code Newbie я услышал, как одна из участниц сказала, что слово «ага» звучит для нее музыкой. Иногда она застревает и сообщает о проблеме старшим инженерам, и, посмотрев некоторое время на код, они тоже иногда могут застрять! У старших инженеров тоже нет всех решений. Когда она слышит, как они говорят «ага», это подтверждает. Она поняла, что ни у кого из нас не бывает всех идей постоянно, поэтому лучше принять менталитет «мы все вместе».
3. Привыкайте к дискомфорту от постоянного отсутствия «правильного ответа».
Я много лет преподаю математику в старшей школе, и это упражнение было действительно хорошим напоминанием о том, каково это — чувствовать себя полностью сбитым с толку и потерянным. Когда я позвонил техническим тренерам, и у них тоже не было немедленного ответа, это меня очень обнадежило. Я понял, что чувствовать себя немного сбитым с толку, потерянным или обескураженным – это нормально. На самом деле, я учусь относиться к путанице и принимать ее за то, что она есть: возможность расти.
Спасибо за чтение, и, пожалуйста, помните, глядя на мой код, что я новичок в программировании! Я буду поправляться, если ты будешь терпеливой.
Я закончу небольшим советом: никогда не называйте свой пост в блоге ссылкой на доктора Стрейнджлава. Миллениалы не получат рекомендацию, а бумеры не сочтут вас умным…
Всем удачного кодирования!
