Events & Local Storage In JavaScript
| Event | Description |
|---|---|
| onchange | An HTML element has been changed |
| onclick | The user clicks an HTML element |
| onmouseover | The user moves the mouse over an HTML element |
| onmouseout | The user moves the mouse away from an HTML element |
| onkeydown | The user pushes a keyboard key |
| onload | The browser has finished loading the page |
<html>
<button type="submit" id="sub" onclick="prompt('enter your fav number :')">Submit</button>
<h1 id="heading"></h1>
<input type="text" id="change" onchange="myfunc()" placeholder="ENTER YOUR NAME AND SEE THE MAGIC"/>
<div class="container" id="bgchg" ></div>
<div class="joke_container">
<div class="main_container">
<button type="submit" id="btn" onclick="joke()">Tell Me 🤣</button>
<p id="joke_fetch"></p>
</div>
</div>
<style>
.container{
margin: 10px;
background: #000;
width: 500px;
height: 500px;
}
</style>
<script>
// Events In JS
// 1. On Click
// 2. On Change
// 3. Mouse Over
// 4. Mouse Out
let sub = document.getElementById('sub');
let heading = document.getElementById('heading');
// sub.addEventListener('click', () =>{
// heading.innerText = "hi kal hall hai tumhara!!"
// console.log("daya!! button par kisi nae click kai");
// })
function apnafunc(){
console.log("kia hall hai tumhara comment kar ke batana")
}
let input = document.getElementById('change');
input.addEventListener('change', () =>{
input.value = input.value.toUpperCase();
})
// function myfunc(){
// let input = document.getElementById('change')
// input.value = input.value.toUpperCase();
// }
// Mouse Over
let mouse_fucn = document.getElementById('bgchg');
mouse_fucn.addEventListener('mouseenter', () =>{
mouse_fucn.style.background = "orange"
console.log("mouse enter bhai")
})
mouse_fucn.addEventListener('mouseleave', () =>{
mouse_fucn.style.background = "black";
console.log("mouse gaya yaar")
});
// LocalStroage In JS
let time = new Date().toLocaleTimeString();
console.log(time)
let ls = localStorage.setItem("Time", time)
// Function, Local Storage, Arrays, Math.random, Math.floor
// Name = ("Joke Teller")
function joke(){
let btn = document.getElementById('btn');
let joke_container = document.getElementById('joke_fetch');
let jokes = [
'this is a simple joke hahahahahahaha', 'this is a very simple joke this this hahahahahah',
'A woman gets on a bus with her baby. The bus driver says: “Ugh, that’s the ugliest baby I’ve ever seen!” The woman walks to the rear of the bus and sits down, fuming. She says to a man next to her: “The driver just insulted me!” The man says: “You go up there and tell him off. Go on, I’ll hold your monkey for you.',
'I said to the Gym instructor “Can you teach me to do the splits?” He said, “How flexible are you?” I said, “I can’t make Tuesdays.',
'Police arrested two kids yesterday, one was drinking battery acid, the other was eating fireworks. They charged one – and let the other one off.',
'Doc, I can’t stop singing the ‘Green Green Grass of Home’. He said: “That sounds like Tom Jones syndrome.” “Is it common?” I asked. “It’s not unusual” he replied.',
'I’m on a whiskey diet. I’ve lost three days already.',
'My therapist says I have a preoccupation with vengeance. We’ll see about that.',
'A priest, a rabbi and a vicar walk into a bar. The barman says, “Is this some kind of joke?”',
'A group of chess enthusiasts checked into a hotel and were standing in the lobby discussing their recent tournament victories. After about an hour, the manager came out of the office and asked them to disperse. “But why?” they asked, as they moved off. “because,” he said “I can’t stand chess nuts boasting in an open foyer.',
'I was in Tesco’s and I saw this man and woman wrapped in a barcode. I said, “Are you two an item?”',
'I was having dinner with Garry Kasporov (world chess champion) and there was a check tablecloth. It took him two hours to pass me the salt.'
];
let number = Math.floor(Math.random() * 10);
number = Number.parseInt(number);
console.log(number);
let jokes_main = localStorage.setItem('joke', jokes[number]);
let jokes_fetched = localStorage.getItem('joke');
joke_container.innerText = jokes_fetched;
}
joke();
</script>
</html>
Tags
javascript