ruiguan.github.io/script.js at main · ruiguan/ruiguan.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
const move1Radio = document.getElementById("architecture");
const move2Radio = document.getElementById("urbandesign");
const move3Radio = document.getElementById("exhibition");
const move4Radio = document.getElementById("interior");

const movingElement = document.getElementById("carousel");
const slider = document.getElementById("slider")

move1Radio.addEventListener("change", function() {
  if (move1Radio.checked) {
    movingElement.style.transform = "translateX(0px)";
    slider.style.left= "12.5%";
    slider.style.animationName = "input1";
  }
});

move2Radio.addEventListener("change", function() {
  if (move2Radio.checked) {
    movingElement.style.transform = "translateX(-105%)";
    slider.style.left= "37.5%";
    slider.style.animationName = "input2";
  }
});

move3Radio.addEventListener("change", function() {
  if (move3Radio.checked) {
    movingElement.style.transform = "translateX(-210%)";
    slider.style.left= "62.5%";
    slider.style.animationName = "input3";
  }
});

move4Radio.addEventListener("change", function() {
    if (move4Radio.checked) {
      movingElement.style.transform = "translateX(-315%)";
      slider.style.left= "87.5%";
      slider.style.animationName = "input4";
    }
});

const move5Radio = document.getElementById("webdeisgn");
const move6Radio = document.getElementById("dataviz");
const move7Radio = document.getElementById("frontend");
const move8Radio = document.getElementById("backend");

const movingElement1 = document.getElementById("carousel1");
const slider1 = document.getElementById("slider1")

move5Radio.addEventListener("change", function() {
  if (move5Radio.checked) {
    movingElement1.style.transform = "translateX(0px)";
    slider1.style.left= "12.5%";
    slider1.style.animationName = "input1";
  }
});

move6Radio.addEventListener("change", function() {
  if (move6Radio.checked) {
    movingElement1.style.transform = "translateX(-105%)";
    slider1.style.left= "37.5%";
    slider1.style.animationName = "input2";
  }
});

move7Radio.addEventListener("change", function() {
  if (move7Radio.checked) {
    movingElement1.style.transform = "translateX(-210%)";
    slider1.style.left= "62.5%";
    slider1.style.animationName = "input3";
  }
});

move8Radio.addEventListener("change", function() {
    if (move8Radio.checked) {
      movingElement1.style.transform = "translateX(-315%)";
      slider1.style.left= "87.5%";
      slider1.style.animationName = "input4";
    }
});


const radioButtons = document.querySelectorAll("input[name='move']");
const textElements = document.querySelectorAll(".text-right")

radioButtons.forEach(function(radioButton) {
    radioButton.addEventListener("change",function() {
        textElements.forEach(function(textElement) {
            textElement.style.display = "none";
        });
        const selectedValue = this.value;
        console.log(selectedValue);
        const selectedTextElements = document.querySelectorAll("."+selectedValue);
        console.log(selectedTextElements);
            selectedTextElements.forEach(function(selectedTextElement) {
                selectedTextElement.style.display = "Block";
            });
    });
});

const radioButtons1 = document.querySelectorAll("input[name='move1']");
const textElements1 = document.querySelectorAll(".text-left")

radioButtons1.forEach(function(radioButton) {
    radioButton.addEventListener("change",function() {
        textElements1.forEach(function(textElement) {
            textElement.style.display = "none";
        });
        const selectedValue = this.value;
        console.log(selectedValue);
        const selectedTextElements = document.querySelectorAll("."+selectedValue);
        console.log(selectedTextElements);
            selectedTextElements.forEach(function(selectedTextElement) {
                selectedTextElement.style.display = "Block";
            });
    });
});