首页 › HTML论坛 › 程序猿说love的100种语言

初夏如轩 發表於 2023-1-1 08:55:06

程序猿说love的100种语言

<p>说程序猿是直男，不可否认，大多数程序猿都挺直，因为我们没有那么多弯弯绕绕，有心思兜圈子，不如回去写几行代码&hellip;&hellip;&hellip;</p>
<p>程序猿的时间大多都给了工作和学习，但是可能比一般人更缺少爱情。程序猿也许在生活中会比较宅，但是千万不要说程序猿不懂浪漫。当你不开心了，他可以分分钟做出100种&ldquo;我爱你&rdquo;的爱意语言给你制造小惊喜&hellip;</p>
<p>这里的语言不是指编程语言，指的是各个国家语言。前端程序猿工程师制作的一百种语言的LOVE，网页代码如下：</p>
<h2>index.html</h2>
<div class="jb51code"><pre class="brush:xhtml;">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;title&gt;CodePen - 100 List items: Love translations ♡&lt;/title&gt;

    &lt;link rel="stylesheet" href="css/style.css" rel="external nofollow"/&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;dl id="list-group"&gt;&lt;/dl&gt;

    &lt;div id="modal"&gt;&lt;/div&gt;

    &lt;script src="js/script.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</pre></div>
<p>html页面代码很简单，上面引入了css文件夹下的样式文件style.css；下面引入了js文件夹下的js脚本script.js</p>
<h2>style.css</h2>
<div class="jb51code"><pre class="brush:css;">@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&amp;display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
    background-image: -webkit-gradient(linear,
      right bottom, left top,
      from(#ffadad),
      color-stop(#ffd6a5),
      color-stop(#fdffb6),
      color-stop(#caffbf),
      color-stop(#9bf6ff),
      color-stop(#a0c4ff),
      to(#bdb2ff));
    background-image: linear-gradient(to top left,
      #ffadad,
      #ffd6a5,
      #fdffb6,
      #caffbf,
      #9bf6ff,
      #a0c4ff,
      #bdb2ff);
    color: #5d5865;
}

#list-group {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 0.5rem; gap: 0.5rem;
    padding: 1rem;
}

.item {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -webkit-box-pack: center;
            justify-content: center;
    -webkit-box-align: center;
            align-items: center;
    background-image: linear-gradient(45deg, rgba(255,255,255,0.3), transparent, rgba(255,255,255,0.3));
    border-radius: 2rem;
    padding: 3rem 0;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.item::before,
.item::after {
    content: "";
    position: absolute;
    z-index: 1;
    width: 3rem;
    height: 3rem;
}

.item::before {
    bottom: 1rem; left: 1rem;
    border-radius: 0 0 0 1rem;
    background-image: linear-gradient(225deg, transparent 50%, rgba(255, 255, 255, 0.5));
}

.item::after {
    top: 1rem; right: 1rem;
    border-radius: 0 1rem 0 0;
    background-image: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.5));
}

.item:hover,
.item:focus,
.item:active {
    background-color: white;
    outline: none;
}

dt {
    text-align: right;
    font-family: 'Great Vibes', serif;
    font-size: 3rem;
}

dt.smaller {
    font-size: 1.8rem;
}

dt.medium {
    font-size: 2.1rem;
}

dt.smaller,
dt.medium {
    font-style: italic;   
}

.italic {
    font-style: italic;
}

dd {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 300;
    font-size: 0.9rem;
}

dd, dt {
    pointer-events: none;
}

#modal {
    display: none;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -webkit-box-pack: center;
            justify-content: center;
    -webkit-box-align: center;
            align-items: center;
    left: 2rem; top: 2rem; right: 2rem; bottom: 2rem;
    border-radius: 1rem;
    box-shadow: 0.5rem 0.5rem 5rem rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.25);
    background-color: white;
}

#modal.active {
    min-height: 15rem;
    display: -webkit-box;
    display: flex;
    position: fixed;
    z-index: 2;
    -webkit-animation: openModal 0.2s;
            animation: openModal 0.2s;
}

#modal .lang-name {
    position: relative;
    z-index: 4;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 600;
    font-size: 1.3rem;
    text-transform: capitalize;
}

#modal h1 {
    position: relative;
    z-index: 1;
    font-family: 'Great Vibes', serif;
    font-size: 10rem;
    line-height: 1.3;
}

#modal h1.smaller {
    font-size: 5rem;
}

#modal h1.medium {
    font-size: 7.5rem;
}

#modal h1::after,
#modal h1::before { /* modal heart shapes */
    content: "";
    position: absolute;
    bottom: 50%; left: 50%;
    -webkit-transform: translateX(-50%) translateY(52%);
            transform: translateX(-50%) translateY(52%);
    -webkit-clip-path: polygon(50% 10%, 66% 0, 100% 0, 100% 50%, 50% 100%, 0 50%, 0 0, 33% 0);
            clip-path: polygon(50% 10%, 66% 0, 100% 0, 100% 50%, 50% 100%, 0 50%, 0 0, 33% 0);
}

#modal h1::before {
    z-index: -2;
    background-color: lightcoral;
    opacity: 0.5;
    width: 10rem;
    height: 10rem;
    border-radius: 3rem 3rem 6rem 6rem;
}

#modal h1::after {
    z-index: -1;
    background-color: lightcoral;
    opacity: 0.3;
    width: 12rem;
    height: 12rem;
    border-radius: 3rem 3rem 6rem 6rem;
}

#modal-close-btn {
    position: absolute;
    top: 1rem; right: 1rem;
    width: 2rem; height: 2rem;
    text-align: center;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
            justify-content: center;
    -webkit-box-align: center;
            align-items: center;
    background-color: transparent;
    border: 1px solid rgba(93, 88, 101, 0.5);
    border-radius: 0.5rem;
    -webkit-transition: 0.2s ease;
    transition: 0.2s ease;
}

#modal-close-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(93, 88, 101, 0.8);
}

button {
    cursor: pointer;
}

/* tablet styles */
@media screen and (max-width: 959px) {
    #list-group {
      grid-template-columns: repeat(4, 1fr);
    }
   
    #modal {
      left: 1rem; top: 1rem; right: 1rem; bottom: 1rem;
    }
}

@media screen and (max-width: 759px) {
    #list-group {
      grid-template-columns: repeat(3, 1fr);
    }

    #modal h1 {
      font-size: 7rem;
      line-height: 1.3;
    }
   
    #modal h1.smaller {
      font-size: 3rem;
    }
   
    #modal h1.medium {
      font-size: 4.4rem;
    }

    #modal {
      left: 0.75rem; top: 0.75rem; right: 0.75rem; bottom: 0.75rem;
    }
}

@media screen and (max-width: 639px) {
    #list-group {
      grid-template-columns: repeat(2, 1fr);
    }

    #modal h1 {
      font-size: 5rem;
      line-height: 1.3;
    }
   
    #modal h1.smaller {
      font-size: 2rem;
    }
   
    #modal h1.medium {
      font-size: 3.3rem;
    }

    #modal {
      left: 0.5rem; top: 0.5rem; right: 0.5rem; bottom: 0.5rem;
    }
}

@-webkit-keyframes openModal { /* subtle fade in for modal */
    from {
      opacity: 0;
      -webkit-transform: scale(0.8);
                transform: scale(0.8);
    } to {
      opacity: 1;
      -webkit-transform: scale(1);
                transform: scale(1);
    }
}

@keyframes openModal { /* subtle fade in for modal */
    from {
      opacity: 0;
      -webkit-transform: scale(0.8);
                transform: scale(0.8);
    } to {
      opacity: 1;
      -webkit-transform: scale(1);
                transform: scale(1);
    }
}</pre></div>
<h2>script.js&nbsp;</h2>
<div class="jb51code"><pre class="brush:js;">const dl = document.getElementById('list-group');
const modal = document.getElementById('modal');

dl.addEventListener('click', openModal);

function populateList() {

    let output = '';

    loveTranslations.forEach((love) =&gt; {
      // conditionals to change font sizes &amp; style for larger words &amp; langauge by adding a class to the &lt;dt&gt;
      if (love.language === 'georgian' || love.language === 'malayalam' || love.language === 'tatar') {

            output += `&lt;div class="item" tabindex="0"&gt;
                &lt;dt class="smaller"&gt;${love.word}&lt;/dt&gt;
                &lt;dd&gt;${love.language}&lt;/dd&gt;
            &lt;/div&gt;`;

      } else if (to_medium.includes(love.language) === true) {

            output += `&lt;div class="item" tabindex="0"&gt;
                &lt;dt class="medium"&gt;${love.word}&lt;/dt&gt;
                &lt;dd&gt;${love.language}&lt;/dd&gt;
            &lt;/div&gt;`;

      } else if (to_italic.includes(love.language) === true) {

            output += `&lt;div class="item" tabindex="0"&gt;
                &lt;dt class="italic"&gt;${love.word}&lt;/dt&gt;
                &lt;dd&gt;${love.language}&lt;/dd&gt;
            &lt;/div&gt;`;

      } else {

            output += `&lt;div class="item" tabindex="0"&gt;
                &lt;dt&gt;${love.word}&lt;/dt&gt;
                &lt;dd&gt;${love.language}&lt;/dd&gt;
            &lt;/div&gt;`;

      }

    });

    dl.innerHTML = output;
}

function openModal(e) {
    if (e.target.nodeName.toLowerCase() === 'dl') { return; }
    else if (e.target.classList.contains('item') === true) {

      const lang = e.target.children.innerText.toLowerCase();

      modal.classList.toggle('active');

      if (to_italic.includes(lang) === true) { // conditional to change font size for different word sizes and lettering styles, adding classes to h1

            modal.innerHTML += `&lt;button onclick="closeModal()" id="modal-close-btn"&gt;X&lt;/button&gt;
            &lt;h1 class="italic"&gt;${e.target.children.innerText}&lt;/h1&gt;
            &lt;p class="lang-name"&gt;${e.target.children.innerText}&lt;/p&gt;`;

      } else if (to_medium.includes(lang) === true) {

            modal.innerHTML += `&lt;button onclick="closeModal()" id="modal-close-btn"&gt;X&lt;/button&gt;
            &lt;h1 class="medium italic"&gt;${e.target.children.innerText}&lt;/h1&gt;
            &lt;p class="lang-name" style="margin-top:1.5rem"&gt;${e.target.children.innerText}&lt;/p&gt;`;
      } else if (lang === 'georgian' || lang === 'malayalam' || lang === 'tatar') {
            modal.innerHTML += `&lt;button onclick="closeModal()" id="modal-close-btn"&gt;X&lt;/button&gt;
            &lt;h1 class="smaller italic"&gt;${e.target.children.innerText}&lt;/h1&gt;
            &lt;p class="lang-name" style="margin-top: 3rem;"&gt;${e.target.children.innerText}&lt;/p&gt;`;

      } else {

            modal.innerHTML += `&lt;button onclick="closeModal()" id="modal-close-btn"&gt;X&lt;/button&gt;
            &lt;h1&gt;${e.target.children.innerText}&lt;/h1&gt;
            &lt;p class="lang-name"&gt;${e.target.children.innerText}&lt;/p&gt;`;
      }
    }
}

function closeModal() {
    document.getElementById('modal').classList.toggle('active');
    modal.innerHTML = ''; // clearing out the modal text
}

// 100 love translatons: Object Array
const loveTranslations = [
    {
      "language": "english",
      "word": "love"
    },
    {
      "language": "spanish",
      "word": "amor"
    },
    {
      "language": "french",
      "word": "l'amour"
    },
    {
      "language": "dutch",
      "word": "liefde"
    },
    {
      "language": "greek",
      "word": "αγάπη"
    },
    {
      "language": "Arabic",
      "word": "حب"
    },
    {
      "language": "albanian",
      "word": "dashuri"
    },
    {
      "language": "amharic",
      "word": "ፍቅር"
    },
    {
      "language": "armenian",
      "word": "Սեր"
    },
    {
      "language": "azerbaijani",
      "word": "sevgi"
    },
    {
      "language": "basque",
      "word": "maitasuna"
    },
    {
      "language": "belarusian",
      "word": "каханне"
    },
    {
      "language": "bengali",
      "word": "ভালবাসা"
    },
    {
      "language": "bosnian",
      "word": "ljubavi"
    },
    {
      "language": "bulgarian",
      "word": "любов"
    },
    {
      "language": "catalan",
      "word": "amor"
    },
    {
      "language": "cebuano",
      "word": "gugma"
    },
    {
      "language": "chinese",
      "word": "爱"
    },
    {
      "language": "corsican",
      "word": "amore"
    },
    {
      "language": "croatian",
      "word": "ljubav"
    },
    {
      "language": "czech",
      "word": "milovat"
    },
    {
      "language": "danish",
      "word": "elsker"
    },
    {
      "language": "esperanto",
      "word": "amo"
    },
    {
      "language": "estonian",
      "word": "armastus"
    },
    {
      "language": "filipino",
      "word": "pag-ibig"
    },
    {
      "language": "finnish",
      "word": "rakkaus"
    },
    {
      "language": "frisian",
      "word": "leafde"
    },
    {
      "language": "galician",
      "word": "amor"
    },
    {
      "language": "georgian",
      "word": "სიყვარული"
    },
    {
      "language": "german",
      "word": "liebe"
    },
    {
      "language": "gujarati",
      "word": "પ્રેમ"
    },
    {
      "language": "haitian creole",
      "word": "lanmou"
    },
    {
      "language": "hausa",
      "word": "soyayya"
    },
    {
      "language": "hawaiian",
      "word": "aloha"
    },
    {
      "language": "hebrew",
      "word": "אהבה"
    },
    {
      "language": "hindi",
      "word": "प्रेम"
    },
    {
      "language": "hmong",
      "word": "kev hlub"
    },
    {
      "language": "hungarian",
      "word": "szeretet"
    },
    {
      "language": "icelandic",
      "word": "ást"
    },
    {
      "language": "igbo",
      "word": "ihunanya"
    },
    {
      "language": "indonesian",
      "word": "cinta"
    },
    {
      "language": "irish",
      "word": "grá"
    },
    {
      "language": "italian",
      "word": "amore"
    },
    {
      "language": "japanese",
      "word": "愛"
    },
    {
      "language": "javanese",
      "word": "katresnan"
    },
    {
      "language": "kannada",
      "word": "ಪ್ರೀತಿ"
    },
    {
      "language": "kazakh",
      "word": "махаббат"
    },
    {
      "language": "khmer",
      "word": "ស្រឡាញ់"
    },
    {
      "language": "kiryarwanda",
      "word": "urukundo"
    },
    {
      "language": "korean",
      "word": "사랑"
    },
    {
      "language": "kurdish",
      "word": "evîn"
    },
    {
      "language": "kyrgyz",
      "word": "сүйүү"
    },
    {
      "language": "lao",
      "word": "ຮັກ"
    },
    {
      "language": "latin",
      "word": "amare"
    },
    {
      "language": "latvian",
      "word": "mīlestība"
    },
    {
      "language": "lithuanian",
      "word": "meilė"
    },
    {
      "language": "luxembourish",
      "word": "Léift"
    },
    {
      "language": "macedonian",
      "word": "убов"
    },
    {
      "language": "malagasy",
      "word": "fitiavana"
    },
    {
      "language": "malay",
      "word": "cinta"
    },
    {
      "language": "malayalam",
      "word": "സ്നേഹം"
    },
    {
      "language": "maltese",
      "word": "imħabba"
    },
    {
      "language": "moari",
      "word": "aroha"
    },
    {
      "language": "marathi",
      "word": "प्रेम"
    },
    {
      "language": "mongolian",
      "word": "хайр"
    },
    {
      "language": "burmese",
      "word": "aahkyit"
    },
    {
      "language": "nepali",
      "word": "माया"
    },
    {
      "language": "norwegian",
      "word": "kjærlighet"
    },
    {
      "language": "odia",
      "word": "ପ୍ରେମ"
    },
    {
      "language": "pashto",
      "word": "مينه"
    },
    {
      "language": "persian",
      "word": "عشق"
    },
    {
      "language": "polish",
      "word": "miłość"
    },
    {
      "language": "portuguese",
      "word": "amar"
    },
    {
      "language": "punjabi",
      "word": "ਪਿਆਰ"
    },
    {
      "language": "romanian",
      "word": "dragoste"
    },
    {
      "language": "russian",
      "word": "люблю"
    },
    {
      "language": "samoan",
      "word": "alofa"
    },
    {
      "language": "scots gaelic",
      "word": "ghaoil"
    },
    {
      "language": "serbian",
      "word": "љубав"
    },
    {
      "language": "sesotho",
      "word": "lerato"
    },
    {
      "language": "shona",
      "word": "rudo"
    },
    {
      "language": "sindhi",
      "word": "پيار"
    },
    {
      "language": "sinhala",
      "word": "ආදරය"
    },
    {
      "language": "slovak",
      "word": "láska"
    },
    {
      "language": "slovinian",
      "word": "ljubezen"
    },
    {
      "language": "somali",
      "word": "jacayl"
    },
    {
      "language": "sudanese",
      "word": "bogoh"
    },
    {
      "language": "swahili",
      "word": "upendo"
    },
    {
      "language": "swedish",
      "word": "kärlek"
    },
    {
      "language": "tamil",
      "word": "காதல்"
    },
    {
      "language": "tatar",
      "word": "мәхәббәт"
    },
    {
      "language": "telugu",
      "word": "ప్రేమ"
    },
    {
      "language": "thai",
      "word": "รัก"
    },
    {
      "language": "turkish",
      "word": "aşk"
    },
    {
      "language": "turkmen",
      "word": "söýgi"
    },
    {
      "language": "ukranian",
      "word": "кохання"
    },
    {
      "language": "urdu",
      "word": "محبت"
    },
    {
      "language": "vietnamese",
      "word": "yêu"
    },
    {
      "language": "yiddish",
      "word": "ליבע"
    },
    {
      "language": "zulu",
      "word": "uthando"
    }
];

// array of languages that the characters need to italicised
const to_italic = ['hebrew', 'hindi', 'korean', 'kannada', 'lao', 'macedonian', 'mongolian', 'nepali', 'odia', 'russian', 'serbian', 'telugu', 'thai', 'marathi'];

// array of languages that need to reduced in font size
const to_medium = ['belarusian', 'bengali', 'greek', 'armenian', 'bulgarian', 'gujarati', 'khmer', 'kazakh', 'kyrgyz', 'punjabi', 'tamil', 'ukranian'];

populateList();</pre></div>

查看完整版本: 程序猿说love的100种语言