I am trying to write a script in a web page that will sort of copy and paste a button and it's hidden content and then append in on the bottom of the first button. The problem is I am not very literate in JS.
So when one would press the "Add" button, button "Test Button #1" will be copied and appended to the bottom as "Test Button #2". Keep in mind that the button may contain a dropdown of sort in the actual script, this one was just shortened, so the second button would have to contain the same info as the first. Any help would be very much appreciated.
Please use my attempt at the bottom script as a template:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
min-width: 250px;
}
.testBtn {
width: 100%;
background-color: grey;
color: white;
border: none;
}
/* Style the header */
.header {
background-color: black;
padding: 30px 40px;
color: white;
text-align: center;
}
/* Clear floats after the header */
.header:after {
content: "";
display: table;
clear: both;
border: none;
}
/* Style the "Add" button */
.addBtn {
padding: 10px;
width: 25%;
background: #d9d9d9;
color: #555;
float: left;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
}
.addBtn:hover {
background-color: #bbb;
}
</style>
</head>
<body>
<div id="myDIV" class="header">
<h2 style="margin:5px">Test Button List</h2>
<span onclick="newElement()" class="addBtn">Add</span>
</div>
<div class="myUL" id="myUL">
<button class="testBtn">Test Button #1</button>
</div>
<script>
function newElement() {
var li = document.createElement("button");
var inputValue = document.getElementById("myUL").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === !"") {
document.getElementById("myUL").appendChild(li);
}
}
</script>
</body>
</html>
#################EDITED
I tried the node.clone() method, but still cannot append the button. Any suggestions?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
min-width: 250px;
}
.testBtn {
width: 100%;
background-color: grey;
color: white;
border: none;
}
/* Style the header */
.header {
background-color: black;
padding: 30px 40px;
color: white;
text-align: center;
}
/* Clear floats after the header */
.header:after {
content: "";
display: table;
clear: both;
border: none;
}
/* Style the "Add" button */
.addBtn {
padding: 10px;
width: 25%;
background: #d9d9d9;
color: #555;
float: left;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
}
.addBtn:hover {
background-color: #bbb;
}
.Btn {
padding: 10px;
width: 25%;
background: #d9d9d9;
color: #555;
float: left;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
}
.Btn:hover {
background-color: #bbb;
}
</style>
</head>
<body>
<div id="myDIV" class="header">
<h2 style="margin:5px">Test Button List</h2>
<span onclick="newSample()" class="addBtn">Add</span>
</div>
<div class="testBtn" id="testBtn">
<button class="Btn">Test Button #1</button>
</div>
<script>
function newSample() {
var p = document.getElementById("testBtn");
var p_prime = p.cloneNode(true);
node.appendChild(p_prime);
}
</script>
</body>
</html>
So here's a few problems.
var li = document.createElement("button");
If it's a <button> why are you calling it var li? Use a meaningful name here.
var inputValue = document.getElementById("myUL").value;
#myUL is a <div> (so why it's called UL is another mystery). You are treating it like an <input /> by trying to get its value. If you want the HTML content, use innerHTML...
var t = document.createTextNode(inputValue);
... but you're creating a text node, so I don't know what you're expecting any more. It's all very confusing.
li.appendChild(t);
This is probably fine. You're appending a text node to a button. Seems ok.
if (inputValue === !"") {
Translation: "if inputValue is identical to true" - this can never happen because inputValue is a string and true is a boolean. Did you mean inputValue !== ""?
On the whole, it's a mess. What you probably want to do is get your "template" button and use .cloneNode(true) on it, then append that to the container.
Related
how can i correctly implement html and css to wordpress site? inserting into html section caused this:
enter image description here
enter image description here
and i want it to look like this: check pic
enter image description here
i dont want other text to be in box shadow
* {
box-sizing: border-box;
}
div.cenovy_box {
width: 100%;
outline: 1px solid #f2f1f1 !important;
box-shadow: 0px 5px 10px #d3d3d3;
float: left;
}
div.fotkavboxe {
display: flex;
float: left;
width: 30%;
margin-left: 50px;
}
h1.nadpis_p {
border-bottom: 2px solid #20d796;
font-family: "poppins";
text-align: center;
padding-bottom: 10px;
}
div.tlacidlo {
clear: both;
width: 30%;
display: flex;
}
.k_predajcovi {
font-family: "poppins";
background-color: #000000;
color: #ffffff;
font-size: 20px;
cursor: pointer;
padding: 10px 20px;
border: solid #000000 2px;
opacity: 1;
transition: 0.3s;
}
.k_predajcovi:hover {
color: #000000;
background-color: #fff;
opacity: 1;
}
p.cena_v_boxe {
width: 30%;
font-size: 25px;
font-family: "poppins";
float: left;
}
img.fotka {
background-color: #000000;
border: 2px #555;
opacity: 1;
transition: 0.3s;
}
img.fotka:hover {
color: #fff;
opacity: 0.5;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
</style>
</head>
<body>
<div class="cenovy_box">
<div class="obsah">
<h1 class="nadpis_p">Brutálna vychytávka</h1>
</div>
<div class="fotkavboxe">
<a href="https://www.banggood.com/Xiaomi-Redmi-Note-10-Pro-Global-Version-6GB-128GB-108MP-Quad-Camera-6_67-inch-120Hz-AMOLED-Display-33W-Fast-Charge-Snapdragon-732G-Octa-Core-4G-Smartphone-p-1828679.html?cur_warehouse=HK&ID=62464446304721&rmmds=search"
target="_blank"><img class="fotka" src="https://imgaz.staticbg.com/thumb/large/oaupload/banggood/images/FE/BE/525e460f-581a-46ee-b737-1fe3d9492492.jpg.webp" alt="redmi note 10" style="width: 200px; height:200px;"></a>
</div>
<div class="cena">
<p class="cena_v_boxe">20€</p>
</div>
<div class="tlacidlo">
<button class="k_predajcovi" onclick="window.location.href = 'https://www.google.sk';">
K predajcovi
</button>
</div>
</div>
</body>
</html>
can you please help mw with inserting this code into articles? i want to adding it into articles just html (css will be in custom css settings) i am unable to code my own plugin, so this how i am making this
How to Upload an HTML File to WordPress
1) Navigate to your Admin Dashboard.
2) Click 'Pages' in the left sidebar.
3) Choose an existing page or create a new one.
4) Click 'Add Block.'
5) Add a 'File' block.
6) Choose your HTML file.
I made a todo app, but you can't delete some of the items. I tried a lot of stuff, but it doesn't work. Can you help me understand the reason for the errors? I'm also trying to figure out a way to increase the character limit.
html:
<!DOCTYPE html>
<!-- Created By Zarif Sefat -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SideQuests | Simple Todo App</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<link rel="icon" href="images/icon.png">
</head>
<body>
<h1 class="logo-or-something"><i class="fas fa-check-square"></i> SideQuests</h1>
<div class="wrapper">
<header>SIDE QUESTS</header>
<div class="inputField">
<input type="text" placeholder="Add your new side quest">
<button><i class="fas fa-plus"></i></button>
</div>
<ul class="todoList">
<!-- data are comes from local storage -->
</ul>
<div class="footer">
<span>You have <span class="pendingTasks"></span> pending side quests</span>
<button>Clear All</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
css:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
::selection{
color: #ffff;
background: rgb(142, 73, 232);
}
body{
width: 100%;
height: 100vh;
padding: 10px;
background: linear-gradient(to bottom, #68EACC 0%, #497BE8 100%);
}
.wrapper{
background: #fff;
max-width: 400px;
width: 100%;
margin: 120px auto;
padding: 25px;
border-radius: 5px;
box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
}
.wrapper header{
font-size: 30px;
font-weight: 600;
}
.wrapper .inputField{
margin: 20px 0;
width: 100%;
display: flex;
height: 45px;
}
.inputField input{
width: 85%;
height: 100%;
outline: none;
border-radius: 3px;
border: 1px solid #ccc;
font-size: 17px;
padding-left: 15px;
transition: all 0.3s ease;
}
.inputField input:focus{
border-color: #8E49E8;
}
.inputField button{
width: 50px;
height: 100%;
border: none;
color: #fff;
margin-left: 5px;
font-size: 21px;
outline: none;
background: #8E49E8;
cursor: pointer;
border-radius: 3px;
opacity: 0.6;
pointer-events: none;
transition: all 0.3s ease;
}
.inputField button:hover,
.footer button:hover{
background: #721ce3;
}
.inputField button.active{
opacity: 1;
pointer-events: auto;
}
.wrapper .todoList{
max-height: 250px;
overflow-y: auto;
}
.todoList li{
position: relative;
list-style: none;
height: 45px;
line-height: 45px;
margin-bottom: 8px;
background: #f2f2f2;
border-radius: 3px;
padding: 0 15px;
cursor: default;
overflow: hidden;
}
.todoList li .icon{
position: absolute;
right: -45px;
background: #e74c3c;
width: 45px;
text-align: center;
color: #fff;
border-radius: 0 3px 3px 0;
cursor: pointer;
transition: all 0.2s ease;
}
.todoList li:hover .icon{
right: 0px;
}
.wrapper .footer{
display: flex;
width: 100%;
margin-top: 20px;
align-items: center;
justify-content: space-between;
}
.footer button{
padding: 6px 10px;
border-radius: 3px;
border: none;
outline: none;
color: #fff;
font-weight: 400;
font-size: 16px;
margin-left: 5px;
background: #8E49E8;
cursor: pointer;
user-select: none;
opacity: 0.6;
pointer-events: none;
transition: all 0.3s ease;
}
.footer button.active{
opacity: 1;
pointer-events: auto;
}
.logo-or-something {
color: rgb(142, 73, 232);
}
js:
// getting all required elements
const inputBox = document.querySelector(".inputField input");
const addBtn = document.querySelector(".inputField button");
const todoList = document.querySelector(".todoList");
const deleteAllBtn = document.querySelector(".footer button");
// onkeyup event
inputBox.onkeyup = ()=>{
let userEnteredValue = inputBox.value; //getting user entered value
if(userEnteredValue.trim() != 0){ //if the user value isn't only spaces
addBtn.classList.add("active"); //active the add button
}else{
addBtn.classList.remove("active"); //unactive the add button
}
}
showTasks(); //calling showTask function
addBtn.onclick = ()=>{ //when user click on plus icon button
let userEnteredValue = inputBox.value; //getting input field value
let getLocalStorageData = localStorage.getItem("New Todo"); //getting localstorage
if(getLocalStorageData == null){ //if localstorage has no data
listArray = []; //create a blank array
}else{
listArray = JSON.parse(getLocalStorageData); //transforming json string into a js object
}
listArray.push(userEnteredValue); //pushing or adding new value in array
localStorage.setItem("New Todo", JSON.stringify(listArray)); //transforming js object into a json string
showTasks(); //calling showTask function
addBtn.classList.remove("active"); //unactive the add button once the task added
}
function showTasks(){
let getLocalStorageData = localStorage.getItem("New Todo");
if(getLocalStorageData == null){
listArray = [];
}else{
listArray = JSON.parse(getLocalStorageData);
}
const pendingTasksNumb = document.querySelector(".pendingTasks");
pendingTasksNumb.textContent = listArray.length; //passing the array length in pendingtask
if(listArray.length > 0){ //if array length is greater than 0
deleteAllBtn.classList.add("active"); //active the delete button
}else{
deleteAllBtn.classList.remove("active"); //unactive the delete button
}
let newLiTag = "";
listArray.forEach((element, index) => {
newLiTag += `<li>${element}<span class="icon" onclick="deleteTask(${index})"><i class="fas fa-trash"></i></span></li>`;
});
todoList.innerHTML = newLiTag; //adding new li tag inside ul tag
inputBox.value = ""; //once task added leave the input field blank
}
// delete task function
function deleteTask(index){
let getLocalStorageData = localStorage.getItem("New Todo");
listArray = JSON.parse(getLocalStorageData);
listArray.splice(index, 1); //delete or remove the li
localStorage.setItem("New Todo", JSON.stringify(listArray));
showTasks(); //call the showTasks function
}
// delete all tasks function
deleteAllBtn.onclick = ()=>{
listArray = []; //empty the array
localStorage.setItem("New Todo", JSON.stringify(listArray)); //set the item in localstorage
showTasks(); //call the showTasks function
}
If you remove this from your css:
.todoList li{
overflow: hidden;
}
And you will enter a long input, you will see where the problem is. It's not that the button doesn't show up, but it's where it shows up.
When your div is too long, the button won't appear in the same line, but lower, causing you to not see it.
To solve this problem, you could add this (the overflow hidden was already there):
.todoList li{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
Setting hoverflow:hidden won't allow you to scroll, but the entire text would still be there. The other two lines will make the css cut the text when there's no more space. And this will make your button appear in the right place.
I'm using jQuery to create a to-do list and centered everything on the page using text-align: center with body in my CSS file. But how can I left-align newly added list items below the form?
Here's the JavaScript portion of the code I'm currently using (my guess is this is what I'd need to change), but you can also view my CodePen to view the CSS and HTML.
$(function() {
$('.button').click(function() {
let toAdd = $('input[name=checkListItem]').val();
// inserts specified element as last child of target element
$('.list').append('<div class="item">' + toAdd + '</div>');
// clears input box after clicking 'add'
$('input[name=checkListItem]').val('');
});
$('input[name=checkListItem]').keypress(function(e) {
if (e.which == 13) {
$('.button').click();
// e.preventDefault() prevents default event from occuring, e.stopPropagation() prevents event from bubbling up, and return false does both
return false;
}
});
$(document).on('click', '.item', function() {
$(this).remove();
});
});
You're simply looking for:
.item {
text-align: left;
}
This can be seen in the following:
$(function() {
$('.button').click(function() {
let toAdd = $('input[name=checkListItem]').val();
// inserts specified element as last child of target element
$('.list').append('<div class="item">' + toAdd + '</div>');
// clears input box after clicking 'add'
$('input[name=checkListItem]').val('');
});
$('input[name=checkListItem]').keypress(function(e) {
if (e.which == 13) {
$('.button').click();
// e.preventDefault() prevents default event from occuring, e.stopPropagation() prevents event from bubbling up, and return false does both
return false;
}
});
$(document).on('click', '.item', function() {
$(this).remove();
});
});
body {
text-align: center;
background: #dfdfdf;
font-family: Helvetica;
color: #666;
background: linear-gradient(to left, #DA4453, #89216B);
}
.container {
padding: 30px;
padding-top: 10px;
width: 300px;
/* 0 is for top-bottom and auto (set to equal values for each by browser) for left-right */
margin: 0 auto;
margin-top: 40px;
background: white;
border-radius: 5px;
}
form {
/* needed for the same property/value to work to display the button next to form */
display: inline-block;
}
input[type=text] {
border: 1px solid #ccc;
height: 1.6em;
width: 15em;
color: #666;
}
.button {
/* makes button display next to form */
display: inline-block;
box-shadow: inset 0px 1px 0 0 #fff;
/* starts at top, transitions from left to right */
background: linear-gradient(#f9f9f9 5%, #e9e9e9 100%);
border: 1px solid #ccc;
background-color: #c00;
font-size: 0.7em;
font-family: Arial;
font-weight: bold;
border-radius: 0.33em;
/* padding is space between element's content and border. First value sets top and bottom padding; second value sets right and left */
padding: 0.5em 0.9em;
text-shadow: 0 1px #fff;
text-align: center;
}
.button:hover {
cursor: pointer;
opacity: .8;
}
.item {
text-align: left;
}
<html>
<head>
<meta charset="UTF-8">
<title>To-Do List</title>
<link rel="stylesheet" href="stylesheet.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="container">
<h2>To Do</h2>
<form name="checkListForm">
<input type="text" name="checkListItem" />
</form>
<div class="button">Add</div>
<br>
<div class="list"></div>
</div>
</body>
</html>
Note that you'll probably also want to add some margin-top to the first element, which can be done with the :first-of-type pseudo-class:
.item:first-of-type {
margin-top: 20px;
}
Adding this as well can be seen in the following:
$(function() {
$('.button').click(function() {
let toAdd = $('input[name=checkListItem]').val();
// inserts specified element as last child of target element
$('.list').append('<div class="item">' + toAdd + '</div>');
// clears input box after clicking 'add'
$('input[name=checkListItem]').val('');
});
$('input[name=checkListItem]').keypress(function(e) {
if (e.which == 13) {
$('.button').click();
// e.preventDefault() prevents default event from occuring, e.stopPropagation() prevents event from bubbling up, and return false does both
return false;
}
});
$(document).on('click', '.item', function() {
$(this).remove();
});
});
body {
text-align: center;
background: #dfdfdf;
font-family: Helvetica;
color: #666;
background: linear-gradient(to left, #DA4453, #89216B);
}
.container {
padding: 30px;
padding-top: 10px;
width: 300px;
/* 0 is for top-bottom and auto (set to equal values for each by browser) for left-right */
margin: 0 auto;
margin-top: 40px;
background: white;
border-radius: 5px;
}
form {
/* needed for the same property/value to work to display the button next to form */
display: inline-block;
}
input[type=text] {
border: 1px solid #ccc;
height: 1.6em;
width: 15em;
color: #666;
}
.button {
/* makes button display next to form */
display: inline-block;
box-shadow: inset 0px 1px 0 0 #fff;
/* starts at top, transitions from left to right */
background: linear-gradient(#f9f9f9 5%, #e9e9e9 100%);
border: 1px solid #ccc;
background-color: #c00;
font-size: 0.7em;
font-family: Arial;
font-weight: bold;
border-radius: 0.33em;
/* padding is space between element's content and border. First value sets top and bottom padding; second value sets right and left */
padding: 0.5em 0.9em;
text-shadow: 0 1px #fff;
text-align: center;
}
.button:hover {
cursor: pointer;
opacity: .8;
}
.item {
text-align: left;
}
.item:first-of-type {
margin-top: 20px;
}
<html>
<head>
<meta charset="UTF-8">
<title>To-Do List</title>
<link rel="stylesheet" href="stylesheet.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="container">
<h2>To Do</h2>
<form name="checkListForm">
<input type="text" name="checkListItem" />
</form>
<div class="button">Add</div>
<br>
<div class="list"></div>
</div>
</body>
</html>
I put this in the css of your pen and it seemed to do the trick:
.list {
text-align: left;
margin-left: 40px;
}
and you can tweak the margin as necessary.
you can use
.list {
text-align: left;
}
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
I want to have something like a dropdown menu. I now have a hover in css but I know I have to use javascript to make it clickable. Can anyone help me making it clickable?
This is my current html code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="jumbotron">
<p>What will you be making for dinner tonight?</p>
<li class="inspiration">
Give me some inspiration!
<div class="recipe">
With those temperatures it is not a bad idea to have a BBQ! Here is a recipe for hummus to have as a side dish!
<ul>
<iframe width="392" height="220" src="https://www.youtube.com/embed/SfcSo-j-doc?rel=0&showinfo=0" frameborder="20px" allowfullscreen></iframe>
<ul>
</div>
</li>
</div>
</body>
</html>
and my css:
.inspiration {
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
cursor: pointer;
color: #012556;
font-size: 20px;
}
.inspiration:hover {
background: #555;
color: #012556;
font-size: 20px;
}
.inspiration:hover .recipe {
display: block;
opacity: 1;
visibility: visible;
}
.inspiration .recipe {
display: block;
padding: 0;
color: #fff;
position: center;
width: 1000px;
padding-top: 20px;
padding-bottom: 20px;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
}
.jumbotron {
background-image:url(http://www.superiorequipmentsupplies.com/wp-content/themes/superior_v1.73/library/images/hero-residential.jpg);
height: 640px;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
}
.jumbotron h1 {
color: #fff;
font-size: 42px;
font-family: 'Shift', sans-serif;
font-weight: bold;
text-align: center;
}
.jumbotron p {
font-size: 20px;
color: #fff;
text-align: center;
}
I still don't get what to put in my javascript file
Add onclick in your li element
<li class="inspiration" onclick="functionname()">
Using event listeners, and the getComputedStyle() to get the styles and getPropertyValue() to get the visibility property. then using the if else as a toggle for opening and closing the menu dropdown. the css should be visibility: hidden for recipe class
<script>
var inspiration = document.getElementsByClassName("inspiration");
var expandMenu = function() {
var recipe = document.getElementsByClassName("recipe");
var CSSprop = window.getComputedStyle(recipe,null).getPropertyValue("visibility");
if(CSSprop == "visible"){
recipe[0].style.visibility = "hidden";
}else {
recipe[0].style.visibility = "visible";
}
}
inspiration[0].addEventListener("click", expandMenu);
</script>
Using Jquery syntax you can do this.
Add the following code to <head> tag and from css remove hover.
<script>
$(document).ready(function(){
$(".inspiration").click(function(){
$("#recepe").toggle();
});
});
</script>