This question already has answers here:
How can I horizontally center an element?
(133 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 1 year ago.
I am not sure how to centre the password input field, password text and submit button. I've tried text-align centre but I'm new and don't have enough experience to know a different way to do it.
Any help is appreciated!
note: if you refresh the page too often the api gets limited and the GIF disappears, i wouldve just changed it to an image for this question but i thought that might have something to do with it.
<!doctype HTML>
<html>
<head>
<meta name="websiteinnit" content="width=device-width, initial-scale=1">
<link rel=icon href="https://i.imgur.com/zWdbQf2.png">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(function() {
var xhr = $.get("http://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag=no");
xhr.done(function(data) {
$('.gif-bg').css('background-image', 'url(' + data.data.image_url + ')');
});
});
</script>
</head>
<body>
<div class = "usernamecss">
<div class = "passwordcss">
<label class = "password" for = "password">Password:</label><br>
<input class = "passwordinput" type= "Password" id="password" name="password">
</div>
</form>
<div-1>
<input class = "submitbutton" type="submit" value="Submit">
</div-1>
<div class="gif-bg">
</div>
<style>
body {
margin: 100px;
}
.gif-bg {
background:url('') no-repeat center center;
min-height:10%;
min-width:10%;
Padding: 50px;
}
.password {
position:relative;
font-family: monospace;
font-size: 15px;
text-align:center;
outline:10px black;
position:absolute;
}
.passwordinput {
border-style: inset;
border-radius: 4px;
margin:4px;
text-align:center;
}
.submitbutton {
border-style: bold;
border-radius: 4px;
background-color: #BDD9BF;
transition-duration: 0.4s;
margin:4px;
}
.submitbutton:hover {
background-color: grey;
color: grey;
}
</style>
</body>
</html>
You can make use of flexbox's align-items and justify-content properties:
html,
body {
height: 100%;
margin: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
<!doctype HTML>
<html>
<head>
<meta name="websiteinnit" content="width=device-width, initial-scale=1">
<link rel=icon href="https://i.imgur.com/zWdbQf2.png">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(function() {
var xhr = $.get("http://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag=no");
xhr.done(function(data) {
$('.gif-bg').css('background-image', 'url(' + data.data.image_url + ')');
});
});
</script>
</head>
<body>
<div class="usernamecss">
<div class="passwordcss">
<label class="password" for="password">Password:</label><br>
<input class="passwordinput" type="Password" id="password" name="password">
</div>
<div-1>
<input class="submitbutton" type="submit" value="Submit">
</div-1>
<div class="gif-bg">
</div>
</div>
<style>
body {
margin: 100px;
}
.gif-bg {
background: url('') no-repeat center center;
min-height: 10%;
min-width: 10%;
Padding: 50px;
}
.password {
position: relative;
font-family: monospace;
font-size: 15px;
text-align: center;
outline: 10px black;
position: absolute;
}
.passwordinput {
border-style: inset;
border-radius: 4px;
margin: 4px;
text-align: center;
}
.submitbutton {
border-style: bold;
border-radius: 4px;
background-color: #BDD9BF;
transition-duration: 0.4s;
margin: 4px;
}
.submitbutton:hover {
background-color: grey;
color: grey;
}
</style>
</body>
</html>
For the password css class add these values:
.passwordcss {
display: flex;
justify-content: center;
width: 100%;
}
Make sure that the parent element is taking 100% of the windoe
Another approach would be to create display flex in .passwordcss
and add
.passwordcss > * {
margin: 0 auto;
}
Margin auto will align everything to the center, given parent is 100% width and display is flex
Related
i am just trying to visualize the arrays in the webpage for now but for some reason the webpage is always blank where the bars should be.
'use strict';
document.getElementById("start").addEventListener("click", start);
function start(){
alert("her");
}
document.getElementById("reset").addEventListener("click", reset);
function reset(){
alert("bye");
}
function myfunction(){
let arr = [];
let barheight = [2,4,1];
for(int i=0;i<3;i++)
{
arr[i] = document.createElement('div');
arr[i].classList.add("barstyle");
arr[i].style.height = barheight[i] +'px';
const k=document.getElementById("bars");
k.element.appendchild(arr[i]);
}
myfunction();
}
the function myfunction makes an empty array in which the the bars are to be pushed
and the array barheight contains the height of the individual bars as you can see in the code
then i have created 3 div elements and added in the array arr and then set the css to the individual elements of the array then i have pushed all the elements in the div , this is where i think the problem is but i don't know what it is
here is the css code
* {
margin: 0;
padding: 0;
}
body{
background-color: #EEF1FF;
}
h3{
display: flex;
justify-content: center;
}
input{
margin-left:15px
}
.heading{
text-align: center;
}
.buttons{
margin: 30px;
display:flex;
justify-content: center;
align-items:center;
}
.top{
background-color :#B1B2FF;
padding-bottom: 1px;
}
.barstyle{
width: 4px;
background-color: whitesmoke;
margin-right: 2px;
margin-left: 5px;
display: inline-block;
border-radius: 50px;
}
#start{
height: 30px;
width: 50px;
margin-right:15px;
cursor: pointer;
background-color: white;
border-radius: 5px;
border-color:#FFFEB1;
}
#reset{
height: 30px;
width: 50px;
margin-right:15px;
border-radius: 5px;
background-color: white;
border: 2px ;
cursor: pointer;
}
#start:hover{
background-color: #FFFEB1;
color:#B1B2FF ;
}
#reset:hover{
background-color: #DFFFEB;
color: #B1B2FF;
}
and the html code
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="top">
<h1 class="heading">Epic Sorting Visualizer </h1>
<nav>
<div class="buttons">
<button type="button" name="button" id="start">start</button>
<button type="button" name="button" id="reset">reset</button>
<h3>array size <input type="range" value=""></h3>
</div>
</div>
</nav>
<div id="bars">
</div>
<script src="index.js"></script>
</body>
</html>
when user click on checkbox todo list background become blue text decoration on list paragraph is line-through how i can to do this using javascript
Javascript code
function createlist()
{
document.getElementById("tolist").insertAdjacentHTML ("afterend",`<div id="todolistcontainer">
<input type="checkbox" id="checkbox-list" onclick="complete()">
<p id="tasktodo"></p>
<i class="fa-sharp fa-solid fa-xmark" id="todoicon" onclick="deletelist()"></i>
</div>`);
document.getElementById("tasktodo").innerHTML=document.getElementById("input").value;
}
function deletelist()
{
document.getElementById("todolistcontainer").remove();
}
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="main.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>To Do List JavaScript</title>
</head>
<body>
<div class="container">
<input type="text" id="input" >
<button id="button" onclick="createlist()">Add</button>
</div>
<div id="tolist"></div>
</body>
</html>
CSS code
#import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght#500&display=swap');
body{
margin-left: 30%;
margin-right: 30%;
font-family:fira Code;
}
.container{
display: flex;
flex-direction: row;
justify-content: center;
border: 5px solid black;
width:100%;
margin-bottom: 10px;
}
.container #input{
border: 0px solid black;
width:100%;
margin: auto;
font-size:40px;
}
.container #input:focus{
outline:none;
}
.container #button{
border: 0px solid black;
width:30%;
margin: auto;
background-color: blue;
color: white;
height:100%;
font-size:40px;
}
#todolistcontainer{
border:1px solid black;
width:80%;
height: 100px;
margin-top:12px;
margin:auto;
display: flex;
flex-direction: row;
margin-top: 12%;
}
#tasktodo{
font-size:150%;
width:30%;
align-self: center;
margin: auto;
}
#checkbox-list{
width:8%;
}
#checkbox-list:checked{
accent-color: blue;
}
#todoicon{
display: flex;
flex-direction: row;
align-self: center;
width:12%;
font-size:50px;
}
MY todo-complete javascript function
function complete()
{
if(document.getElementById("checkbox-list.parentNode").checked)
{
document.getElementById("tasktodo").style.textDecoration="line-through";
document.getElementById("tasktodo").style.color="grey";
document.getElementById("todolistcontainer").style.backgroundColor="blue";
}
else{
document.getElementById("tasktodo").style.textDecoration="none";
document.getElementById("tasktodo").style.color="black";
document.getElementById("todolistcontainer").style.backgroundColor="white";
}
}
But output is not satisfied
I am learning html dom and got stuck at this project
A few things to learn here:
You can't use ID's more than once. Everytime you were adding a todolist item, it was using the same ID and your code would only ever affect the first instance of those IDs. Instead, use classes.
Rather than use IDs and a whole bunch of 'getElementById', use relative paths. For example, you can send your complete() function a reference to the checkbox like this onclick="complete(this)". Then in your function, you can find the container using closest() like this: elem.closest('.todolistcontainer').
Finally, don't make your life hard by manually changing styles - instead use classes. A single class for your checked state would do the trick. Then you can just turn on and off the class based on the checkbox
function complete(elem) {
let container = elem.closest('.todolistcontainer');
if (elem.checked) container.classList.add('ischecked');
else container.classList.remove('ischecked');
}
function createlist() {
let todo = document.getElementById("input").value;
document.getElementById("tolist").insertAdjacentHTML("afterend", `<div class="todolistcontainer">
<input type="checkbox" onclick="complete(this)">
<p class="tasktodo">${todo}</p>
<i class="fa-sharp fa-solid fa-xmark" class="todoicon" onclick="deletelist(this)"></i>
</div>`);
}
function deletelist(elem) {
elem.closest('.todolistcontainer').remove();
}
#import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght#500&display=swap');
body {
margin-left: 30%;
margin-right: 30%;
font-family: fira Code;
}
.container {
display: flex;
flex-direction: row;
justify-content: center;
border: 5px solid black;
width: 100%;
margin-bottom: 10px;
}
.container #input {
border: 0px solid black;
width: 100%;
margin: auto;
font-size: 40px;
}
.container #input:focus {
outline: none;
}
.container #button {
border: 0px solid black;
width: 30%;
margin: auto;
background-color: blue;
color: white;
height: 100%;
font-size: 40px;
}
.todolistcontainer {
border: 1px solid black;
width: 80%;
height: 100px;
margin-top: 12px;
margin: auto;
display: flex;
flex-direction: row;
margin-top: 12%;
}
.tasktodo {
font-size: 150%;
width: 30%;
align-self: center;
margin: auto;
}
.checkbox-list {
width: 8%;
}
.checkbox-list:checked {
accent-color: blue;
}
.todoicon {
display: flex;
flex-direction: row;
align-self: center;
width: 12%;
font-size: 50px;
}
/* NEW CSS */
.todolistcontainer.ischecked .tasktodo {
text-decoration: line-through;
background: blue;
color: #fff;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="container">
<input type="text" id="input">
<button id="button" onclick="createlist()">Add</button>
</div>
<div id="tolist"></div>
Kinglish beat me to the punch - but I have one additional thing to add:
Instead of inline JS use event delegation on your list container to catch events from its child elements as they "bubble up" the DOM. You can then check to see if the element that fired the event was a button, check its checked status, and then use nextElementSibling to update the paragraph style.
const input = document.querySelector('input');
const list = document.querySelector('.tolist');
const add = document.querySelector('.add');
add.addEventListener('click', createList);
list.addEventListener('click', handleList);
function createList(e) {
const html = `
<div class="todoContainer">
<input type="checkbox" class="checkbox completed">
<p class="tasktodo">${input.value}</p>
</div>
`;
list.insertAdjacentHTML('beforeend', html);
}
function handleList(e) {
if (e.target.matches('.checkbox')) {
const { checked, nextElementSibling: nes } = e.target;
if (checked) {
nes.classList.add('strike');
nes.closest('.todoContainer').classList.add('blue');
} else {
nes.classList.remove('strike');
nes.closest('.todoContainer').classList.remove('blue');
}
}
}
#import url(https://fonts.googleapis.com/css2?family=Fira+Code:wght#500&display=swap);.container,.container input{width:100%}.container .add,.container input{border:0 solid #000;margin:auto;font-size:30px}body{margin-left:30%;margin-right:30%;font-family:fira Code}.container{display:flex;flex-direction:row;justify-content:center;border:5px solid #000;margin-bottom:10px}.container .input:focus{outline:0}.container .add{width:30%;background-color:#00f;color:#fff;height:100%}.todoContainer{border:1px solid #000;width:80%;height:100px;margin:12% auto auto;display:flex;flex-direction:row}.tasktodo{font-size:150%;width:30%;align-self:center;margin:auto}.checkbox{width:8%}.checkbox:checked{accent-color:blue}
.checkbox:hover { cursor: pointer; }
.strike { text-decoration: line-through; color: grey; }
.blue { background-color: lightblue; }
<div class="container">
<input type="text">
<button class="add">Add</button>
</div>
<div class="tolist"></div>
I am trying to create a chat webpage using Python Flask as a backend. I want to align messages that are received and sent recently to be aligned in the bottom and when new ones arrive that msg should move up and new ones should be placed in that place. How to do that? I have read similar questions but couldn't understand how to implement it for my needs.
My chat page structure is as follows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="{{
url_for('static', filename = 'static/css/jquery/jquery.js')
}
}
">\x3C/script>')
</script>
<script type=text/javascript>
$SCRIPT_ROOT = {
{
request.script_root | tojson | safe
}
};
$(function() {
$('#send_btn').bind('click', function() {
$.getJSON($SCRIPT_ROOT + '/serve_msg', {
msg: $('input[name="msg"]').val(),
}, function(data) {
var msg = document.createElement('div');
msg.className = 'msg';
msg.innerHTML = '<img src="" alt="You"><p id="send_msg"> document.getElementById("msg").value </p><span class="time-left">11:00</span>';
document.getElementById('msg_box').appendChild(msg);
$('#send_msg').text($('input[name="msg"]').val())
$("#reply").text(data.reply);
});
return false;
});
});
</script>
<!--<link rel="stylesheet" href="webi/templates/style.css">-->
<style type="text/css">
body {
background-color: #2a4982;
}
.container {
border: 2px solid #dedede;
background-color: #555555;
border-radius: 5px;
align-self: center;
padding-bottom: 3%;
margin-top: 4%;
margin-left: 16%;
margin-right: 10%;
}
.chatbox {
border: 2px solid #dedede;
background-color: #cac6f1;
border-radius: 5px;
align-self: center;
padding-bottom: 6%;
margin-left: 15%;
margin-right: 15%;
}
.main_heading {
font-weight: bolder;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size: 30px;
color: #2981bc;
-webkit-text-stroke: 1px cornsilk;
padding-top: -8%;
padding-bottom: -8%;
}
.text_input_area {
margin-top: 1%;
margin-bottom: -1%;
}
.msg_box {
position: relative;
background: rgb(22, 29, 34);
/*padding-bottom: 50%;*/
height: 450px;
width: 770px;
overflow: scroll;
}
.msg_input {
width: 85%;
padding-bottom: 3%;
}
.msg_sent {}
.msg_recieved {}
/* Style time text */
.time-right {
float: right;
color: #aaa;
}
/* Style time text */
.time-left {
float: left;
color: #999;
}
.msg {
position: relative;
;
border: 2px solid #dedede;
background-color: #f1f1f1;
border-radius: 5px;
height: 40px;
width: fit-content;
margin: 15px 0;
bottom: 0px;
}
/* Darker chat container */
.msg_recieved {
border-color: #ccc;
background-color: #ddd;
}
/* Clear floats */
.container::after {
content: "";
clear: both;
display: table;
}
/* Style images */
.container img {
float: left;
max-width: 60px;
width: 100%;
margin-right: 20px;
border-radius: 50%;
}
/* Style the right image */
.container img.right {
float: right;
margin-left: 20px;
margin-right: 0;
}
</style>
<title>AVE - WEB INTERFACE</title>
</head>
<body>
<div class="container" align="center">
<p class="main_heading"> AVE - AI Virtual Entity</p>
<div class="chatbox">
chatbox
<div class="msg_box">
<div class="msg msg_recieved">
<img src="" alt="Ave">
<p id="reply">Hello. How are you today?</p>
<span class="time-right">11:00</span>
</div>
</div>
<div class="input-group mb-3">
<input type="text" name="msg" id="msg" class="form-control" placeholder="Type your message here!" aria-label="input_area" aria-describedby="send_btn">
<div class="input-group-append">
<button class="btn btn-primary" type="button" id="send_btn" onclick="display_send_msg">Send</button>
</div>
</div>
</div>
</div>
</body>
</html>
Sorry for the bad code! I am new to this whole idea. There may be lots of errors. Sorry for that
Let say you have a basic markup structure like
<main id="msgs">
<div>Message #0</div>
<div>Message #1</div>
<div>Message #2</div>
<div>Message #3</div>
<div>Message #4</div>
<!-- new messages are appended here -->
</main>
Using Flexbox you could place them in reverse order so every new message is visible on top of the page
main {
display: flex;
flex-flow: column-reverse nowrap;
}
Then via Javascript, once you appended the new message you need to scroll the main element via scrollTo(0, 0); The scroll could even be improved via CSS with scroll-behavior: smooth;
Here below a snippet that simulates a new message every 5s:
var messageArea = document.getElementById('msgs');
messageArea.scrollTo(0, 0);
setInterval(() => {
/* create a new message element */
var msgEl = document.createElement('div');
/* create a string with the message */
var msgText = 'Message #' + messageArea.children.length;
/* set the textContent of the element with the message */
msgEl.textContent = msgText;
/* append the new message in the container of the messages */
messageArea.appendChild(msgEl);
/* finally scroll the message area to (0, 0) coords. */
messageArea.scrollTo(0, 0);
}, 5000)
main {
height: 100vh;
display: flex;
overflow: auto;
padding: 1em .5em;
flex-flow: column-reverse nowrap;
scroll-behavior: smooth;
}
div {
border: 1px #ccc solid;
border-radius: 10px;
padding: 1em;
margin-top: 1.5em;
width:60%;
align-self: flex-start;
}
div:nth-child(2n) {
align-self: flex-end;
}
<main id="msgs">
<div>Message #0</div>
<div>Message #1</div>
<div>Message #2</div>
<div>Message #3</div>
<div>Message #4</div>
</main>
The best thing would be to just normally append new message to the messages div and use JavaScript/jQuery to scroll to bottom of that div.
jQuery:
$('.messages').scrollTop($('.messages').height())
I trying to learn JavaScript I make my Quiz game.
I get problem with modal window,because when I write nickname after this I push Submit I wanna saving nickname in localStorage and close modal window.
Problem is that modal window appear again and i can't passing to main page with Quiz.
Maybe someone can explain me if is possible do it this in different way in JavaScript, at the first I was thinking to make to documents HTML one index.html and nickname.html , but I get also problem because I don't know how to change url(); in JavaScript after Submit.
I appreciate every opinion. Thank You.
const enter = document.getElementById('enter');
const modal = document.getElementById('screen');
enter.addEventListener('click',function(){
let forms = document.forms["form-welcome"]["nickname"].value
if(forms == ""){
alert("Write you nickname.");
return false;
}
else{
modal.style.display = "none";
save();
}
})
function save(){
localStorage.setItem(
document.forms["form-welcome"]["nickname"].value
);
}
*{
margin: 0px;
padding: 0px;
}
body{
background-color: red;
}
/*##### Window Modal #####*/
.wrapper{
font-size: 24px;
font-family:'Bree Serif', serif;
text-align: center;
}
.modal{
display: block;
position: fixed;
z-index: 1;
left: 0;
top:0;
width:100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgb(0,0,0,0.4);
}
.offModal{
display: none;
}
.animate{
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s;
}
.model{
display: inline-block;
margin-top: 25px;
width: 30%;
height: auto;
background-color: #4edb0cfb;
position: relative;
border-radius: 25px;
border:1px solid rgba(0, 0, 0, 0.267);
box-shadow: 1.5px 1.5px rgba(0, 0, 0, 0.4);
}
.welcome{
letter-spacing: 1px;
position: relative;
text-align: center;
line-height: 50px;
padding-top: 15px;
margin-top: 15px;
}
.submit{
border-radius: 5px;
font-size: 30px;
margin: 10px;
padding: 10px;
}
.submit:hover{
background-color: rgb(153, 150, 150);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Final-Quiz</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Bree+Serif&display=swap" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<!--############### FIST SCREEN ################-->
<section>
<div id="screen" class="modal">
<form class="welcome model" name="form-welcome">
<h1>Final-Quiz</h1>
<label for="nickname">Nickname:</label>
<input type="text" name="nickname" required>
<input id="enter" class="submit" type="submit" value="Enter">
<p>Let's check your knowledge about HTML,CSS and JavaScript.</p>
</form>
</div>
</div>
</section>
</div>
<script src="localStorage.js"></script>
</body>
</html>
Thanks for everybody I find solution for my problem.
Inside tag i write action and url(); of second HTML page.
<form action="secondHtml.html">
After submit i go to main page.
This is a 'To-Do List' project that I want to include in my portfolio. The text typed into the box starts at the bottom and keeps putting every additional 'to-do' text under the last one so it isn't legible. I'd like for the text to start at the top of the laptop screen that is on the page. Please click the link and enter any text twice and you will see my error.
https://nicoleirene.github.io/js-exercise-2/
My code is below.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<title>JS Exercise 2</title>
</head>
<body>
<h1>Lets Do This</h1>
<form>
<label for="user-input" >Type your to do:</label>
<div class="wrapper">
<input type="text" name="user-input" id="user-input" placeholder="Enter To Do!">
<button type="submit" id="user-submit">Add To Do!</button>
</div>
</form>
<ul id="to-do-list" class="to-do-list">
</ul>
<!-- Make sure script is loaded at the bottom-->
<script src="js/app.js"></script>
</body>
</html>
JS
var userSubmit = document.querySelector('#user-submit');
var toDoList = document.querySelector('#to-do-list');
function addToDo(event){
event.preventDefault();
var userInput = document.querySelector('#user-input');
if(userInput.value === ''){
return false;
}
toDoList.innerHTML = '<li><i class="fa fa-window-close close-to-do" aria-hidden="true"></i>' + userInput.value + '</li>' + toDoList.innerHTML;
userInput.value = '';
}
function removeToDo(event){
if(event.target.classList.contains('close-to-do')) {
var li = event.target.parentElement;
toDoList.removeChild(li);
}
}
toDoList.addEventListener('click', removeToDo, false);
userSubmit.addEventListener('click', addToDo, false);
CSS
#import url('https://fonts.googleapis.com/css?family=Raleway');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body{
font-family: 'Raleway', sans-serif;
background-color: #FFF;
background-image: url("../images/pixel-open-front.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
color: #000;
}
h1{
text-align: center;
padding:;
background-color: blue;
color:#FFF;
}
label{
display: block;
margin:right;
text-align: center;
background-color: red;
color:white;
}
input{
/*display:block;
margin:auto;*/
}
.wrapper{
text-align: center;
}
button{
color:white;
background-color:red;
border:none;
padding: 5px;
margin-top: 5px;
}
ul{
text-align: center;
padding: 300px;
list-style: none;
color:red;
}
.close-to-do{
display: inline-block;
margin-right: 10px;
}
I would set it up differently. Padding may cause problems with different screen sizes. Below I put the laptop as the background for the list.
var userSubmit = document.querySelector('#user-submit');
var toDoList = document.querySelector('#to-do-list');
function addToDo(event) {
event.preventDefault();
var userInput = document.querySelector('#user-input');
if (userInput.value === '') {
return false;
}
toDoList.innerHTML = '<li><i class="fa fa-window-close close-to-do" aria-hidden="true"></i>' + userInput.value + '</li>' + toDoList.innerHTML;
userInput.value = '';
}
function removeToDo(event) {
if (event.target.classList.contains('close-to-do')) {
var li = event.target.parentElement;
toDoList.removeChild(li);
}
}
toDoList.addEventListener('click', removeToDo, false);
userSubmit.addEventListener('click', addToDo, false);
#import url('https://fonts.googleapis.com/css?family=Raleway');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Raleway', sans-serif;
background-color: #FFF;
color: #000;
}
h1 {
text-align: center;
padding: ;
background-color: blue;
color: #FFF;
}
label {
display: block;
margin: right;
text-align: center;
background-color: red;
color: white;
}
input {
/*display:block;
margin:auto;*/
}
.wrapper {
text-align: center;
}
button {
color: white;
background-color: red;
border: none;
padding: 5px;
margin-top: 5px;
}
ul {
text-align: center;
padding-top: 100px; /* same as top background */
list-style: none;
color: red;
}
ul:before {
content: url(https://nicoleirene.github.io/js-exercise-2/images/pixel-open-front.png);
position: absolute;
top: 100px; /* same as padding top */
left: 80px;
}
.close-to-do {
display: inline-block;
margin-right: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<h1>Lets Do This</h1>
<form>
<label for="user-input">Type your to do:</label>
<div class="wrapper">
<input type="text" name="user-input" id="user-input" placeholder="Enter To Do!">
<button type="submit" id="user-submit">Add To Do!</button>
</div>
</form>
<ul id="to-do-list" class="to-do-list"></ul>
As mentioned in my comments, padding on Ul element is causing it to display at the middle of the screen.
Adjust padding to fix your issue.
For responsive design , please use media queries to display text properly