attempting-diffraction/questions/index.js

//project tiltle-->project description
const element = document.querySelector("#project_title");
element.addEventListener("click", show_title, false);

function next_delay(){
    document.getElementById("project_des").style.display = "block";
    document.querySelector("#project_des p").style.display = "none";
}

function show_title() {
    document.getElementById("proj_title_input").style.display = "block";
    setTimeout(next_delay, 2000);
    localStorage.clear();
}

//project description-->project budget
const element2 = document.querySelector("#project_des");
element2.addEventListener("click", show_des, false);

function next_delay2(){
    document.getElementById("project_budg").style.display = "block";
    document.querySelector("#project_budg p").style.display = "none";
}

function show_des() {
    document.getElementById("proj_des_input").style.display = "block";
    setTimeout(next_delay2, 2000);
}

//project budget-->what
const element3 = document.querySelector("#project_budg");
element3.addEventListener("click", show_budg, false);

function next_delay3(){
    document.getElementById("project_what").style.display = "block";
    document.querySelector("#project_what ul").style.display = "none";
}

function show_budg() {
    document.getElementById("proj_budg_input").style.display = "block";
    setTimeout(next_delay3, 2000);
}

//project what-->why
const element4 = document.querySelector("#project_what");
element4.addEventListener("click", show_what, false);

function next_delay4(){
    document.getElementById("project_why").style.display = "block";
    document.querySelector("#project_why ul").style.display = "none";
}

function show_what() {
    document.getElementById("proj_what_input").style.display = "block";
    setTimeout(next_delay4, 2000);
}

//project why-->how
const element5 = document.querySelector("#project_why");
element5.addEventListener("click", show_why, false);

function next_delay5(){
    document.getElementById("project_how").style.display = "block";
    document.querySelector("#project_how ul").style.display = "none";
}

function show_why() {
    document.getElementById("proj_why_input").style.display = "block";
    setTimeout(next_delay5, 2000);
}

//project how-->where
const element6 = document.querySelector("#project_how");
element6.addEventListener("click", show_how, false);

function next_delay6(){
    document.getElementById("project_where").style.display = "block";
    document.querySelector("#project_where ul").style.display = "none";
}

function show_how() {
    document.getElementById("proj_how_input").style.display = "block";
    setTimeout(next_delay6, 2000);
}

//project where-->whom
const element7 = document.querySelector("#project_where");
element7.addEventListener("click", show_where, false);

function next_delay7(){
    document.getElementById("project_whom").style.display = "block";
    document.querySelector("#project_whom ul").style.display = "none";
}

function show_where() {
    document.getElementById("proj_where_input").style.display = "block";
    setTimeout(next_delay7, 2000);
}

//project whom + diff btn
const element8 = document.querySelector("#project_whom");
element8.addEventListener("click", show_whom, false);

function next_delay8(){
    document.getElementById("diff").style.display = "block";
}

function show_whom() {
    document.getElementById("proj_whom_input").style.display = "block";
    setTimeout(next_delay8, 2000);
}


//Pop Up
function popup(){
    document.getElementById("popup").style.visibility = "visible";
}

function popup_close(){
    document.getElementById("popup").style.visibility = "hidden";
}

//Diffraction pop_ups
function next_no_1(){
    document.getElementById("no_1").style.visibility = "visible";
}

function next_no_2(){
    document.getElementById("no_2").style.visibility = "visible";
}

function next_no_3(){
    document.getElementById("no_3").style.visibility = "visible";
}

function next_no_4(){
    document.getElementById("no_4").style.visibility = "visible";
}

function next_no_5(){
    document.getElementById("no_5").style.visibility = "visible";
}

function next_no_6(){
    document.getElementById("no_6").style.visibility = "visible";
}

function next_no_7(){
    document.getElementById("no_7").style.visibility = "visible";
}