Skip to content

Commit 963083c

Browse files
ashishkumar3ashishkumar3
committed
links
1 parent 7f9e3e5 commit 963083c

File tree

5 files changed

+378
-82
lines changed

5 files changed

+378
-82
lines changed

‎app.js

+58-47
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,59 @@
1-
const mic = document.querySelector(".voice");
2-
3-
const themes = ["dark theme", "light theme"];
4-
5-
mic.addEventListener("click", () => {
6-
recognition.start();
7-
});
8-
9-
const SpeechRecognition =
10-
window.SpeechRecognition || window.webkitSpeechRecognition;
11-
12-
const recognition = new SpeechRecognition();
13-
14-
recognition.onstart = function() {
15-
console.log("Voice theme activated");
16-
};
17-
18-
recognition.onresult = function(event) {
19-
const current = event.resultIndex;
20-
21-
const transcript = event.results[current][0].transcript;
22-
23-
const speech = new SpeechSynthesisUtterance();
24-
25-
speech.volume = 1;
26-
speech.rate = 0.8;
27-
speech.pitch = 1;
28-
console.log(speech);
29-
30-
if (transcript.includes("dark theme")) {
31-
document.body.classList.remove("light-theme");
32-
document.body.classList.remove("night-fade");
33-
document.body.classList.add("dark-theme");
34-
speech.text = "Dark theme activated";
35-
} else if (transcript.includes("light theme")) {
36-
document.body.classList.remove("dark-theme");
37-
document.body.classList.remove("night-fade");
38-
document.body.classList.add("light-theme");
39-
speech.text = "Light theme activated";
40-
} else if (transcript.includes("night")) {
41-
document.body.classList.remove("dark-theme");
42-
document.body.classList.remove("light-theme");
43-
document.body.classList.add("night-fade");
44-
speech.text = "Noght fade theme activated";
1+
// const mic = document.querySelector(".voice");
2+
3+
// const themes = ["dark theme", "light theme"];
4+
5+
// mic.addEventListener("click", () => {
6+
// recognition.start();
7+
// });
8+
9+
// const SpeechRecognition =
10+
// window.SpeechRecognition || window.webkitSpeechRecognition;
11+
12+
// const recognition = new SpeechRecognition();
13+
14+
// recognition.onstart = function() {
15+
// console.log("Voice theme activated");
16+
// };
17+
18+
// recognition.onresult = function(event) {
19+
// const current = event.resultIndex;
20+
21+
// const transcript = event.results[current][0].transcript;
22+
23+
// const speech = new SpeechSynthesisUtterance();
24+
25+
// speech.volume = 1;
26+
// speech.rate = 0.8;
27+
// speech.pitch = 1;
28+
// console.log(speech);
29+
30+
// if (transcript.includes("dark theme")) {
31+
// document.body.classList.remove("light-theme");
32+
// document.body.classList.remove("night-fade");
33+
// document.body.classList.add("dark-theme");
34+
// speech.text = "Dark theme activated";
35+
// } else if (transcript.includes("light theme")) {
36+
// document.body.classList.remove("dark-theme");
37+
// document.body.classList.remove("night-fade");
38+
// document.body.classList.add("light-theme");
39+
// speech.text = "Light theme activated";
40+
// } else if (transcript.includes("night")) {
41+
// document.body.classList.remove("dark-theme");
42+
// document.body.classList.remove("light-theme");
43+
// document.body.classList.add("night-fade");
44+
// speech.text = "Noght fade theme activated";
45+
// }
46+
47+
// window.speechSynthesis.speak(speech);
48+
// };
49+
50+
const blogIcon = document.querySelector(".blog-icon");
51+
const sliderBlog = document.querySelector(".sliding-blog-container-close");
52+
53+
blogIcon.addEventListener("click", e => {
54+
if (sliderBlog.style.display == "none") {
55+
sliderBlog.style.display = "flex";
56+
} else if (sliderBlog.style.display == "flex") {
57+
sliderBlog.style.display = "none";
4558
}
46-
47-
window.speechSynthesis.speak(speech);
48-
};
59+
});

‎blog.css

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
/* border: 1px solid black; */
5+
font-family: "Raleway", sans-serif;
6+
}
7+
8+
body {
9+
margin-bottom: 12px;
10+
}
11+
12+
.blog-container {
13+
display: flex;
14+
flex-direction: column;
15+
/* padding: 24px; */
16+
}
17+
18+
.blog-page-head {
19+
text-align: center;
20+
font-size: 60px;
21+
margin: 48px;
22+
font-weight: 600;
23+
}
24+
25+
.blog {
26+
/* padding: 24px; */
27+
/* margin: 24px; */
28+
width: 60%;
29+
margin: auto;
30+
}
31+
32+
.blog header {
33+
padding: 24px;
34+
font-size: 36px;
35+
}
36+
37+
.blog-date {
38+
padding: 6px 24px 6px 24px;
39+
font-size: 14px;
40+
font-weight: 600;
41+
color: rgba(54, 56, 56, 0.671);
42+
}
43+
44+
.blog section {
45+
padding: 24px;
46+
font-size: 24px;
47+
color: rgb(47, 47, 47);
48+
}
49+
50+
.blog-tags {
51+
display: flex;
52+
padding: 24px;
53+
}
54+
55+
.tag {
56+
padding: 12px;
57+
margin-right: 12px;
58+
background: rgb(236, 236, 236);
59+
border-radius: 5%;
60+
color: rgb(100, 100, 100);
61+
}
62+
63+
hr {
64+
width: 60%;
65+
margin: 0 auto;
66+
}

‎blog.html

+122
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<link rel="stylesheet" href="blog.css" />
8+
<title>Blog</title>
9+
</head>
10+
<body>
11+
<div class="blog-container">
12+
<div class="blog-page-head">MY BLOG</div>
13+
<div class="blog">
14+
<header>Blog heading</header>
15+
<p class="blog-date">25-July-2019</p>
16+
<section>
17+
<p>
18+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet
19+
minus velit veritatis beatae tempora minima optio nisi laboriosam
20+
quaerat necessitatibus ullam voluptatibus, quibusdam sit accusamus
21+
odio laudantium nemo asperiores repellendus inventore eligendi hic
22+
aliquam aliquid voluptatum dolorem. Esse, facilis alias enim quidem
23+
ad in magni sequi delectus, quibusdam expedita quis!
24+
</p>
25+
<br />
26+
<p>
27+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet
28+
minus velit veritatis beatae tempora minima optio nisi laboriosam
29+
quaerat necessitatibus ullam voluptatibus, quibusdam sit accusamus
30+
odio laudantium nemo asperiores repellendus inventore eligendi hic
31+
aliquam aliquid voluptatum dolorem. Esse, facilis alias enim quidem
32+
ad in magni sequi delectus, quibusdam expedita quis! Lorem, ipsum
33+
dolor sit amet consectetur adipisicing elit. Voluptatibus non cum,
34+
inventore, assumenda cupiditate odio unde recusandae pariatur, est
35+
facere eveniet molestias. Fugit quia reprehenderit quam corporis
36+
obcaecati porro excepturi sit, facere ea quidem in?
37+
</p>
38+
<br />
39+
<p>
40+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet
41+
minus velit veritatis beatae tempora minima optio nisi laboriosam
42+
quaerat necessitatibus ullam voluptatibus, quibusdam sit accusamus
43+
odio laudantium nemo asperiores repellendus inventore eligendi hic
44+
aliquam aliquid voluptatum dolorem. Esse, facilis alias enim quidem
45+
ad in magni sequi delectus, quibusdam expedita quis!
46+
</p>
47+
<br />
48+
<p>
49+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet
50+
minus velit veritatis beatae tempora minima optio nisi laboriosam
51+
quaerat necessitatibus ullam voluptatibus, quibusdam sit accusamus
52+
odio laudantium nemo asperiores repellendus inventore eligendi hic
53+
aliquam aliquid voluptatum dolorem. Esse, facilis alias enim quidem
54+
ad in magni sequi delectus, quibusdam expedita quis!
55+
</p>
56+
</section>
57+
<div class="blog-tags">
58+
<div class="tag">tag1</div>
59+
<div class="tag">second tag</div>
60+
<div class="tag">3rd tag</div>
61+
<div class="tag">another tag</div>
62+
</div>
63+
</div>
64+
65+
<hr />
66+
67+
<div class="blog">
68+
<header>Blog heading</header>
69+
<p class="blog-date">25-July-2019</p>
70+
<section>
71+
<p>
72+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet
73+
minus velit veritatis beatae tempora minima optio nisi laboriosam
74+
quaerat necessitatibus ullam voluptatibus, quibusdam sit accusamus
75+
odio laudantium nemo asperiores repellendus inventore eligendi hic
76+
aliquam aliquid voluptatum dolorem. Esse, facilis alias enim quidem
77+
ad in magni sequi delectus, quibusdam expedita quis!
78+
</p>
79+
<br />
80+
<p>
81+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet
82+
minus velit veritatis beatae tempora minima optio nisi laboriosam
83+
quaerat necessitatibus ullam voluptatibus, quibusdam sit accusamus
84+
odio laudantium nemo asperiores repellendus inventore eligendi hic
85+
aliquam aliquid voluptatum dolorem. Esse, facilis alias enim quidem
86+
ad in magni sequi delectus, quibusdam expedita quis! Lorem, ipsum
87+
dolor sit amet consectetur adipisicing elit. Voluptatibus non cum,
88+
inventore, assumenda cupiditate odio unde recusandae pariatur, est
89+
facere eveniet molestias. Fugit quia reprehenderit quam corporis
90+
obcaecati porro excepturi sit, facere ea quidem in?
91+
</p>
92+
<br />
93+
<p>
94+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet
95+
minus velit veritatis beatae tempora minima optio nisi laboriosam
96+
quaerat necessitatibus ullam voluptatibus, quibusdam sit accusamus
97+
odio laudantium nemo asperiores repellendus inventore eligendi hic
98+
aliquam aliquid voluptatum dolorem. Esse, facilis alias enim quidem
99+
ad in magni sequi delectus, quibusdam expedita quis!
100+
</p>
101+
<br />
102+
<p>
103+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet
104+
minus velit veritatis beatae tempora minima optio nisi laboriosam
105+
quaerat necessitatibus ullam voluptatibus, quibusdam sit accusamus
106+
odio laudantium nemo asperiores repellendus inventore eligendi hic
107+
aliquam aliquid voluptatum dolorem. Esse, facilis alias enim quidem
108+
ad in magni sequi delectus, quibusdam expedita quis!
109+
</p>
110+
</section>
111+
<div class="blog-tags">
112+
<div class="tag">tag1</div>
113+
<div class="tag">second tag</div>
114+
<div class="tag">3rd tag</div>
115+
<div class="tag">another tag</div>
116+
</div>
117+
</div>
118+
119+
<hr />
120+
</div>
121+
</body>
122+
</html>

0 commit comments

Comments
 (0)