[ JavaScript ] Silly story generator (이상한 이야기 만들기)

ma.caron_g·2022년 12월 14일

자바스크립트

Java Script

목록 보기

8/11

<문제 링크>

이상한 이야기 만들기

[ 문제 ]

간단하게, 배열에 미리 값을 대입해놓고, 정해진 문자열을 통해서 이야기를 만들었을 때, 문자열에서 특정값을 배열에 있는 값으로 교체해주는 문제입니다.

이때, 입력칸이 존재하면 해당 구문에서 특정 문자 또한 입력칸의 값으로 변경합니다.

https://github.com/mdn/learning-area/tree/main/javascript/introduction-to-js-1/assessment-start

지금 보니 내용이 좀 정리되어 있다...

나는 몰라서 다른 사람꺼 js를 조금 베꼈다...

[ 풀이 ]

제가 작성한 코드는

[ html ]

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="random_story.css">
</head>
<body>
        <h3 class="nameInfo">Enter custom name: <input id="myName" type="text"></h3>
        <div class="country">
        <label for="US">US</label><input id="US" name="usuk" value="us" type="radio">
        <label for="UK">UK</label><input id="UK" name="usuk" value="uk" type="radio">
    </div>
        <button class="genStory">Generate random story</button>

        <div class="story">
            <p></p>
        </div>

        <script src="random_story.js"></script>
</body>
</html>

[ css ]

.nameInfo input {
    width: 180px;
    height: 35px;
    vertical-align: middle;
}
.nameInfo {
    margin: 0px;
}
.country {
    margin-top: 30px;
}

.country label {
    font-size: 20px;
    font-weight: 600;
}

.countryInput{
    display: inline-block;
    vertical-align: middle;
}

.genStory {
    display: block;
    background-color: white;
    border: 0.5px solid lightgray;
    box-shadow: 0.5px 0.5px 1px gray;
    width: 180px;
    border-radius: 3px;
    cursor: pointer;
    margin-top: 30px;
}

.genStory:hover {
    background-color: lightgray;
}
.genStory:active {
    background-color: gray;
}

.story {
    margin-top: 30px;
    width: 400px;
}

.story p {
    background-color: rgb(255, 180, 0);
    padding: 5px;
    visibility: hidden;
}

let storyText = "It was 94 fahrenheit outside, so :insertX: went for a walk. When they got to :insertY:, they stared in horror for a few moments, then :insertZ:. Bob saw the whole thing, but was not surprised — :insertX: weighs 300 pounds, and it was a hot day."

let insertX = ['Willy the Goblin', 'BigDaddy', 'Father Christmas'];
let insertY = ['the soup kitchen', 'Disneyland', 'the White Christmas'];
let insertZ = ['spontaneously', 'combusted', 'melted into a puddle on the sidewalk, turned into a slug and crawled away'];

const randomize = document.querySelector('.genStory');
const story = document.querySelector('.story p');
const insertName = document.getElementById('myName');

randomize.addEventListener('click', result());

function randomValueFromArray(arr) {
        let index = Math.floor(Math.random()*3)
        return arr[index];
}

function result() {
    return function() {
    let newStory = storyText;

    let xItem = randomValueFromArray(insertX);
    let yItem = randomValueFromArray(insertY);
    let zItem = randomValueFromArray(insertZ);

    console.log(xItem)
    console.log(yItem)
    console.log(zItem)

    newStory = newStory.replace(':insertX:', xItem).replace(':insertX:', xItem).replace(':insertY:', yItem).replace(':insertZ:', zItem);

    if( insertName.value !== '') {
        let customName = insertName.value
        newStory = newStory.replace('Bob', customName);
    }
  if((document.getElementById("UK")).checked) {
        let weight = Math.round(300*0.07).toString() + 'stone';
        let temperature = Math.round((94-32)/1.8).toString() + ' centigrade';
        newStory = newStory.replace('94 fahrenheit', temperature).replace('300 pounds', weight);
    }

    story.textContent=newStory;
    story.style.visibility = 'visible';
    }
}

ma.caron_g

다른 사람이 만든 것을 소비하는 활동보다, 내가 생산적인 활동을 하는 시간이 더 많도록 생활화 하자.

[ JavaScript ] Silly story generator (이상한 이야기 만들기)

Java Script

[ 문제 ]

[ 풀이 ]

[ html ]

[ css ]

[ JavaScript ] 숫자 맞히기 게임 만들기

[ JavaScript ] 이미지 갤러리 만들기

0개의 댓글