html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<span class="fa fa-times"></span>
<script>
let s=document.querySelector("span");
s.onclick=()=>{
s.classList.toggle("fa-times"); s.classList.toggle("fa-bars");
//using ternary operator,can't think of a better way than it .
/* s.classList[1]=="fa-times"?(s.classList.remove("fa-times"),s.classList.add("fa-bars")):(s.classList.remove("fa-bars"),s.classList.add("fa-times"));*/
}
</script>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
body {
}
Enter to Rename, Shift+Enter to Preview
js
js
1
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run