I am making a note making website using pure JavaScript
This is a HTML Layout
<!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">
<title>Note taking website</title>
<style>
#container {
text-align: center;
}
#container1 {
text-align: center;
}
#flex {
display: flex;
flex-direction: row;
margin: 20px 377px;
}
#show-notes {
width: 278px;
background-color: #70e0d3;
height: 204px;
border: 2px solid purple;
margin: 3px 8px;
}
h3 {
margin-bottom: 0px;
margin-top: 6px;
}
</style>
</head>
<body>
<section id="container" class="contain">
<div id="top">
<h1 class="head">Note Taking Website</h1>
</div>
<div class="second">
<textarea name="area" id="text" cols="110" rows="10" placeholder="Enter here something"></textarea>
</div>
<div class="second" id="class-btn">
<button id="btn" type="submit">Submit</button>
</div>
</section>
<section id="container1">
<h1 id="notes">Your Notes</h1>
<div id="flex">
<!-- <div id="show-notes">
<h3>Notes</h3>
<p id="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam natus unde reiciendis
maiores sint
suscipit explicabo quisquam et, odit consequatur fugiat, repellat fugit nihil placeat aspernatur
accusamus praesentium facere tempore modi eos? Eum, nisi laudantium dolorum hic mollitia corrupti
sequi incidunt cum culpa enim.</p>
</div> -->
</div>
</section>
<script src="javatut/app.js"></script>
<!-- <script src="team.js"></script> -->
</body>
</html>
After building layout, In the JavaScript I want to save the strings in the localStorage. I have to show that notes when a user clicks on submit button whatever in the textarea input under the section of Your Notes but when I am checking the length in console after adding multiple strings in localStorage it shows the length only 1. Please help me to increase the length of localStorage,
you can run this code below
let button = document.getElementById("btn")
button.addEventListener("click",function(e){
let txtara =document.getElementById("text")
let notes = localStorage.getItem("note");
let textobj;
if (notes==null)
{
textobj = [];
}
else
{
textobj =JSON.parse(notes);
}
textobj.push(txtara.value);
localStorage.setItem("note",JSON.stringify(textobj))
// console.log(typeof notes)
})
Related
First of all, sorry for my bad English, hope you understand me.
Second, I started programing yesterday, wathed lots of tutorials and didn't found anything, probably I am just dumb.
Just begun a new html project, I started with a colored bar for the top of the website, then linked an image to the main html project, something like Home navigation bar image idk.
Now the problem is, I want to overlap the already linked to main html to colored bar (https://i.stack.imgur.com/iVqm3.png)
Bluebar CSS code:
.upperblue {
width: 100%;
background-color: rgb(71, 103, 245);
height: 100px;
position: relative;
}
Image HTML and CSS
<p id="homeimage">
<a href="/index.html">
<img `src="https://lh3.googleusercontent.com/EiXgCES3j3b98a6ADBoU37yzcAO1shECNmOzbCZn2HYcUBPW4xiFmCHsXCy-A`mWGTn5ySEU3U-Rpq2H_NrXjjuSg-Qrr3m74XSVF0y9VD6ayXRy2zYaTVqONCjlneaMfsb352Z0S=w2400" height="185"
width="426">
</a>
</p>
I made a example here, i import some fonts , a bunch of CSS selectors . Start studing , ctrl + shift + i on chrome was a good tool for you test it all !!!
<!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">
<title>Document</title>
<!-- IMPORTING GOOGLE MATERIAL FONT ICONS (https://fonts.google.com/icons) -->
<!--
How to use it :
Place the .material-symbols-outlined class in some element that have text (div,span,p,li,table,footer,header,etc..)
I think that it only dont work like inputs, textarea elements
Found some icon : [eg: https://fonts.google.com/icons?icon.query=menu]
Click and copy the example that show right in the page .
example :
<span class="material-symbols-outlined">menu</span>
-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD#48,400,0,0" />
<!-- IMPORTING POPPINS FONT FROM GOOGLE FONTS (https://fonts.google.com/) -->
<!--
How to use it :
On the google page , well on the up-right side on the page have an button : 'View selected families'
(Its a icon actually, you will not see the text XD)
Click there and you will see how to use each font
-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,300;0,400;0,500;1,300;1,400;1,500&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
outline: none;
font-family: 'system-ui', 'sans-serif';
font-weight: 300;
transition: .3s linear 0s all;
}
h1 , h2 ,h3 , h4, h5 {
font-weight: 500;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.8rem;
}
h3 {
font-size: 1.6rem;
}
h4 {
font-size: 1.4rem;
}
h5 {
font-size: 1.2rem;
}
h6 {
font-size: 1.1rem;
}
body {
margin: 0;
}
main {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
/* NOTE THAT HERE WE USE 2REM IN THE SIZE OF ASIDE ICONS , BECAUSE IS THEIR SIZE ON .header-icon ;D */
main > header {
flex: 0 0 50px;
display: grid;
grid-template-columns: 2rem auto 2rem;
justify-items: center;
align-items: center;
background: linear-gradient(45deg, #e7e7e7, #b9b9b9);
border-bottom: 1px solid #b5b5b5;
}
main > header > div:nth-child(1) {
margin: 0;
}
main > header > div:nth-child(2) {
margin: 0;
}
main > header > div:nth-child(3) {
margin: 0;
}
main > section {
flex: 1 0 auto;
padding: 10px;
background: #f1f1f1;
}
main > section > div:nth-child(1) {
width: 100%;
height: 100%;
border-radius: 10px;
padding: 10px;
background: white;
}
main > section > div:nth-child(1) > p {
margin-top: 10px;
}
main > footer {
flex: 0 0 10vmin;
display: grid;
grid-template-columns: auto auto auto;
justify-items: center;
border-top: 1px solid #ffffff82;
background: #e7e7e7;
}
main > footer > div:nth-child(1) {
margin: 0;
}
main > footer > div:nth-child(2) {
margin: 0;
}
main > footer > div:nth-child(3) {
margin: 0;
}
/* SEE THAT , WE CAN TURN OUR ICON BIGGER SETTING A FONT-SIZE PROPERTY !! ALSO OTHER OPTIONS*/
.header-icon {
font-size: 2rem;
}
/* ALSO NOTE THE CSS SELECTORS IM USING ...*/
a.normal {
color: black;
text-shadow: 0px 0px 1px black;
transition: .1s linear 0s text-shadow;
}
a.normal:hover {
text-shadow: 0px 0px 2px black;
}
a.button {
display: block;
border-radius: 6px;
color: white;
font-weight: 500;
text-align: center;
text-shadow: 1px 1px grey;
border: 1px solid gray;
background: #c1c1c1;
padding: 4px 14px;
transform: translate(0px, 0px);
transition: .1s linear 0s all;
}
a.button:hover {
transform: translate(1px, -1px);
box-shadow: 0px 0px 3px -1px #00000069;
}
button.sucess {
border-radius: 6px;
background: green;
color: white;
padding: 2px 10px;
border: 0;
}
</style>
</head>
<body>
<main>
<header>
<!-- Using google materials icons font with a custom class !! the default class need to be here !!-->
<div><span class="header-icon material-symbols-outlined">menu</span></div>
<div><h3>LOGO</h3></div>
<div><span class="header-icon material-symbols-outlined">toggle_on</span></div>
</header>
<section>
<div>
<h5>Main content</h5>
<p>
Lorem ipsum dolor sit amet. Est internos galisum ut adipisci voluptas qui ipsum quisquam aut dicta assumenda ut iste velit sit quia quasi id sequi fugiat. Et autem veniam eum alias optio et quas tenetur aut aperiam dolorem est soluta laboriosam non cupiditate officiis qui neque consequatur. Est ipsam numquam sit nobis iure quo assumenda quidem ut voluptatem accusamus rem consequatur nesciunt eum deserunt accusamus ad eaque explicabo. Hic quam facilis et dolorum galisum ut dolorum aliquid ad dolorem sapiente in aspernatur nemo sed veritatis maxime non dolorem quisquam.
A nemo voluptas a repellat iste ut harum dolor aut neque dolorum nam voluptatibus amet quo repellat autem et quasi nemo. Vel temporibus adipisci nam nesciunt quidem aut voluptas placeat in accusantium sunt ut laborum illum a esse quia aut doloribus molestiae. Ut sint nemo non odit autem ea optio repudiandae et sequi nostrum.
Aut culpa cumque qui repellendus earum aut dolores labore et velit ullam eum ratione culpa ut nemo repellat in dolorum eius. Et cupiditate maxime eos officiis animi eos architecto quam aut ipsa inventore. Ad quos sint ex cumque quis eum officiis harum qui culpa soluta eos optio omnis ut voluptatem accusamus aut ratione fugit. Et inventore vero ab eligendi debitis sit tempore dicta nam voluptatem nostrum.
</p>
Link
Link
<button class="sucess">Button</button>
<textarea name="" id="" cols="30" rows="10"></textarea>
<input type="checkbox" name="" id="myCheckbox"><label for="myCheckbox"></label>
<input type="date" name="" id="">
<input type="file" name="" id="">
<input type="number" name="" id="">
<input type="password" name="" id="">
<input type="search" name="" id="">
<input type="radio" name="" id="">
</div>
</section>
<footer>
<div>FOOTER 1</div>
<div>FOOTER 2</div>
<div>FOOTER 3</div>
</footer>
</main>
</body>
<script>
let modalLinks = document.querySelectorAll('a[data-modal]');
modalLinks.forEach(link =>
link.addEventListener('click', function() {
openModal(link)
})
);
function openModal(e) {
const el = e.closest('.card');
const modal = el.querySelector('[modal]');
modal.setAttribute('modal', 'active');
}
function closeModal(e) {
const modal = e.closest('[modal]');
modal.setAttribute('modal', '');
}
</script>
</html>
CSS SELECTORS // HTML TUTORIAL
could someone help with this?
i have four articles and i want them to be organized like this:
first one
second one third one fourth one
but i don't understand what is the problem??
body {
background-color: #edefee;
font-family: serif;
margin-top: 3rem;
margin-bottom: 3rem;
margin-left: 5%;
margin-right: 5%;
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2rem;
}
header > img {
display: block;
margin-left: auto;
margin-right: auto;
}
nav ul{
list-style: none;
text-align: center;
}
nav li {
display: inline-block;
}
section {
display: flex;
}
article {
flex: 1;
}
footer {
display: flex;
}
footer div {
flex: 1;
}
my problem for the articles
could someone help with this?
i want this result and this is my code for css part
You can use something like https://grid.layoutit.com/ to draw this using grid.
something like this :)
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 0px 0px;
grid-template-areas:
". a1 ."
"a2 a3 a4";
}
.a1 { grid-area: a1; }
.a2 { grid-area: a2; }
.a3 { grid-area: a3; }
.a4 { grid-area: a4; }
this is ny 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">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<header>
<img src="logos/logo3.png" alt="" width="300px" height="100px">
</header>
<nav>
<ul>
<li>Home</li>
<li>Menu</li>
<li>Book</li>
<li>About</li>
</ul>
</nav>
<main>
<section>
<article class="art-fle">
<h1>Header 1</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat
corporis voluptate vel ab consectetur repudiandae sunt accusantium.
Perspiciatis, minima voluptatem!</p>
</article>
</section>
<section>
<article class="art-fle">
<h2>Header 2</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Similique, enim ad architecto necessitatibus consectetur tempora.</p>
</article>
</section>
<section>
<article class="art-fle">
<h2>Header 3</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae,
autem! Modi voluptate officia facere voluptatibus!</p>
</article>
</section>
<section>
<article class="art-fle">
<h2>Header 4</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Perferendis, veniam nam! Dicta dolorum officiis quas?</p>
</article>
</section>
</main>
<footer>
<div>
<img src="">
</div>
<div>
<p>Copyright Little Lemon</p>
</div>
</footer>
</body>
</html>
so i tried building a collapsible sidebar , the sidebar collapses when clicked on button but the contents of it do not get collapsed. When i click on the open menu button it opens the side bar but when i click that button to close it again the content of sidebar that is "hi" written in h1 tag does not disappear. please help.
'''
<!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">
<title>Sidebar practice</title>
<link rel="stylesheet" href="css/sidebar.css">
</head>
<body>
<div class="sidenav" id="sidenav">
<h1>hi</h1>
</div>
<div class="topnav" id="topnav">
<button onclick="openNav()">
open menu
</button>
</div>
<div id="main">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Voluptates aliquam, nihil ab fugiat temporibus maxime nulla
pariatur, sapiente porro blanditiis ipsam eos, labore magnam
dolore et incidunt voluptatem inventore. Possimus?
</p>
</div>
<script>
var checked = 0;
function openNav() {
if(checked == 0){
document.getElementById("sidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.getElementById("topnav").style.marginLeft = "250px";
checked = 1;
}
else{
document.getElementById("sidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
document.getElementById("topnav").style.marginLeft = "0";
checked = 0;
}
}
</script>
</body>
</html>
'''
body {
margin: 0;
}
#topnav {
background-color: #333;
overflow: hidden;
padding: 40px 16px;
transition: 0.5s;
}
#image1 {
height: 25px;
width: 25px;
}
#image2 {
height: 25px;
width: 25px;
}
#sidenav {
height: 100%;
width: 0;
position: fixed;
top: 0;
left: 0;
background-color: #333;
padding-top: 20px;
transition: 0.5s;
}
button {
background-color: #333;
}
#main {
transition: margin-left .5s;
}
<!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">
<title>Sidebar practice</title>
<link rel="stylesheet" href="css/sidebar.css">
</head>
<body>
<div class="sidenav" id="sidenav">
<h1>hi</h1>
</div>
<div class="topnav" id="topnav">
<button onclick="openNav()">
open menu
</button>
</div>
<div id="main">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Voluptates aliquam, nihil ab fugiat temporibus maxime nulla
pariatur, sapiente porro blanditiis ipsam eos, labore magnam
dolore et incidunt voluptatem inventore. Possimus?
</p>
</div>
<script>
var checked = 0;
function openNav() {
if(checked == 0){
document.getElementById("sidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.getElementById("topnav").style.marginLeft = "250px";
checked = 1;
}
else{
document.getElementById("sidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
document.getElementById("topnav").style.marginLeft = "0";
checked = 0;
}
}
</script>
</body>
</html>
Add overflow:hidden to your css in #sidenav
#sidenav {
overflow:hidden;
}
just add this function
function openNav() {
if(checked == 0){
document.getElementById("sidenav").style.display = "block";
checked = 1;
}
else{
document.getElementById("sidenav").style.display = "none";
checked = 0;
}
}
I am trying to figure out how I can use Laxxx.js with my html section with two boxes.Here is my code.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<title>Sidebar Navigation</title>
</head>
<body>
<section id="about">
<div class="page-num">
<h1>01</h1>
</div>
<div class="left">
<div class="box1"></div>
<div class="box2" data-lax-preset="spin-180"></div>
</div>
<div class="right">
<h1>About</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam alias recusandae tenetur impedit similique dolore, rem molestias illo incidunt ipsum ipsa omnis odit, placeat tempore sapiente aliquid unde. Quaerat, architecto ex sit possimus commodi distinctio enim. Maxime, odit iste animi ut et iure, eius error.</p>
</div>
</section>
<script src="node_modules/lax.js/lib/lax.min.js"></script>
<script>
window.onload = function() {
lax.setup() // init
document.addEventListener('scroll', function(e){
lax.update(window.scrollY)
},false)
console.log('hey');
}
</script>
</body>
</html>
scss
#about {
background: black;
height: 100vh;
display: flex;
align-items: center;
color: white;
position:relative;
overflow:hidden;
.left {
width: 40%;
position:relative;
.box1{
position:absolute;
top: 20% ;
left:20%;
z-index:0;
width:400px;
height:400px;
border:30px solid yellow;
overflow:hidden;
transform: rotateZ(65deg);
}
.box2{
position:absolute;
top: 30%;
left:10%;
z-index:0;
width:300px;
height:300px;
border:30px solid red;
overflow:hidden;
}
}
.right {
width: 50%;
padding: 10vh 20vh;
// position:relative;
h1 {
font-size: 3vw;
margin: 0;
}
p {
font-size: 1.2rem;
line-height: 28px;
}
}
}
I guess I have followed al the steps on documentation however I get no amination on scroll and no error on console as well.
And here is the github documentation for laxxx.js https://github.com/alexfoxy/laxxx
I think you just need to add the lax class
<div class="lax box2" data-lax-preset="spin-180"></div>
I have issue with scrollLeft for Safari when page in RTL direction.
In Safari when i do click on button (that has a handler scrollLeft(-200)) i will scroll to 0 position of page. And this is big issue.
Safari: 7.0.1
OS: OS X 10.9.1
Following code has structure like as my page but more easier:
<!DOCTYPE html>
<html dir="rtl">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<style>
.main {
}
.content {
direction: rtl;
width: 2000px;
}
.button-scroll {
width: 50px;
height: 50px;
background: red;
color: white;
text-align: center;
position: fixed;
left: 10px;
top: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="main">
<div class="content">
<h1>Header</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, sapiente illo dignissimos odit nisi. Voluptatibus, temporibus, recusandae totam libero architecto veniam unde quod nisi facere perspiciatis fugiat harum odit tenetur.
</p>
</div>
<div class="button-scroll"></div>
</div>
<script type="text/javascript">
$(document).ready(function($) {
$('.button-scroll').bind('click', function(){
console.log('scrolling... ' + document.body.scrollLeft);
// $(document.body).scrollLeft(100);
document.body.scrollLeft -= 100;
console.log(document.body.scrollLeft);
})
});
</script>
</body>
</html>