Change Username
Enter your username and password to change your username.
Change Password
Enter your current password and new password below.
=======
display: block;
width: 100%;
margin-bottom: 6px;
}
.textarea {
min-width: 400px;
min-height: 80px;
=======
>>>>>>> 40f52ddbff7b95e12ac8bbe777f7115c1faafd08
}
.button:focus {
border: red;
outline: none;
box-shadow: 0 0 3px 1px #8e45ff;
}
.button:active {
color: #8e45ff;
}
.btn-blue {
background-color: #0088cc;
color: #ffffff;
}
.btn-purple {
background-color: rebeccapurple;
color: #ffffff;
}
Button 1
Button 2
Button 3
Button 4
Button 5
Button 6
>>>>>>> refs/remotes/origin/main
<<<<<<< HEAD
<<<<<<< HEAD
HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 <h2 > Change Username</h2 > <p > Enter your username and password to change your username.</p > <form > <div > <label class ="label" for ="username" > Username</label > <input autocomplete ="off" class ="input" type ="text" name ="username" id ="username" > </div > <div > <label class ="label" for ="password" > Password</label > <input autocomplete ="off" class ="input" type ="password" name ="password" id ="password" > </div > <div > <label class ="label" for ="show-password" > <input class ="checkbox" type ="checkbox" name ="show-password" id ="show-password" data-pw-toggle ="#password" > Show password </label > </div > <p > <button class ="button" type ="submit" > Change Username</button > </p > </form > <h2 > Change Password</h2 > <p > Enter your current password and new password below.</p > <form > <div > <label class ="label" for ="current-password" > Current Password</label > <input autocomplete ="off" class ="input" type ="password" name ="current-password" id ="current-password" > </div > <div > <label class ="label" for ="new-password" > New Password</label > <input autocomplete ="off" class ="input" type ="password" name ="new-password" id ="new-password" > </div > <div > <label class ="label" for ="show-passwords" > <input class ="checkbox" type ="checkbox" name ="show-passwords" id ="show-passwords" data-pw-toggle ="#current-password, #new-password" > Show passwords </label > </div > <p > <button class ="button" type ="submit" > Change Passwords</button > </p > </form >
=======
HTML 1 2 3 4 <label class ="label" for ="text" > Enter your text below.</label > <textarea class ="textarea" id ="text" > </textarea > <p > You've written <strong > <span id ="word-count" > 0</span > words</strong > and <strong > <span id ="character-count" > 0</span > characters</strong > .</p >
>>>>>>> refs/remotes/origin/main
=======
HTML 1 2 3 4 5 6 7 8 <p > <button class ="btn-blue button" id ="button-1" > Button 1</button > <button class ="btn-blue button here-is-johnny" id ="button-2" > Button 2</button > <button class ="btn-blue button" id ="button-3" > Button 3</button > <button class ="btn-blue button" id ="button-4" > Button 4</button > <button class ="btn-blue button" id ="button-5" > Button 5</button > <button class ="btn-blue button here-is-johnny" id ="button-6" > Button 6</button > </p >
>>>>>>> 40f52ddbff7b95e12ac8bbe777f7115c1faafd08
<<<<<<< HEAD
<<<<<<< HEAD
JavaScript 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 document .addEventListener('click' , function (e ) { if (!e.target.matches('[data-pw-toggle]' )) return ; const passwords = Array .prototype.slice.call(document .querySelectorAll( e.target.getAttribute('data-pw-toggle' ))); passwords.forEach(password => { if (e.target.checked) { password.type = 'text' ; } else { password.type = 'password' ; } }) });
=======
JavaScript 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 const textArea = document .querySelector('#text' );const countCharOutput = document .querySelector('#character-count' );const countWordOutput = document .querySelector('#word-count' );function counter ( ) { const wordsArr = textArea.value.split(/[\n\r\s]+/g ).filter(item => { return item.length > 0 ; }); countCharOutput.textContent = textArea.value.length; countWordOutput.textContent = wordsArr.length; }; textArea.addEventListener('input' , counter);
>>>>>>> refs/remotes/origin/main
=======
JavaScript 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 const btns = document .querySelectorAll('.button' );const btn2 = document .querySelector('#button-2' );const helperMethod = (function ( ) { const methods = {}; const nodeToArr = function (node ) { return Array .prototype.slice.call(node); }; const getFirstMatch = function (element, match ) { return element.closest(match); }; const getAllMatches = function (match ) { return nodeToArr(document .querySelectorAll(match)); }; const addClassToElem = function (elements, newClass ) { if (nodeToArr(elements).length == 0 ) { return elements.classList.add(newClass); } else { return nodeToArr(elements).map(element => { element.classList.add(newClass); }) } }; const removeClassFromElement = function (elements, newClass ) { if (nodeToArr(elements).length == 0 ) { return elements.classList.remove(newClass); } else { return nodeToArr(elements).map(element => { element.classList.remove(newClass); }) } }; methods.transformToArray = function (node ) { return nodeToArr(node); }; methods.firstMatch = function (element, match ) { return getFirstMatch(element, match); }; methods.allMatches = function (match ) { return getAllMatches(match); }; methods.addClass = function (elements, newClass ) { return addClassToElem(elements, newClass); }; methods.removeClass = function (elements, newClass ) { return removeClassFromElement(elements, newClass); } return methods; })(); console .log('helperMethod.transformToArray(btns)' , helperMethod.transformToArray(btns));console .log('helperMethod.firstMatch(btn2, ".here-is-johnny")' , helperMethod.firstMatch(btn2, '.here-is-johnny' ));console .log('helperMethod.allMatches(".here-is-johnny")' , helperMethod.allMatches('.here-is-johnny' ));helperMethod.addClass(btns, 'btn-purple' ); helperMethod.removeClass(btn2, 'btn-purple' );
>>>>>>> 40f52ddbff7b95e12ac8bbe777f7115c1faafd08