jq 页面添加布局

要求：

1）实现如上图页面布局（10分）

2）实现选择城市所添加的内容追加到你喜欢哪个城市下（10分）

3）实现选择游戏所添加的内容追加到你喜欢哪款游戏下（10分）

4）新增的数据字体颜色设置为粉色（10分）

HTML代码：

<p>你喜欢那个城市？</p>
<ul>
    <li>北京</li>
    <li>上海</li>
    <li>东京</li>
    <li>首尔</li>
    <li id="citys"></li>
</ul>

<p>你喜欢那个单机游戏？</p>
<ul>
    <li>红警</li>
    <li>实况</li>
    <li>极品飞车</li>
    <li>魔兽</li>
    <li id="you"></li>
</ul>

<input type="radio" class="select" name="select" value="1">城市
<input type="radio" class="select" name="select" value="2">游戏
name: <input type="text" class="word"><input type="submit" class="city" value="submit">

JavaScript代码

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>

  <!--给class为city 设置点击事件-->
    $('.city').click(function () {
        //获取 classs 为elect选中的的值
        var select = $(".select:checked").val();
        if (select == 1) {
            // 获取值
            var name = $('.word').val();
            //追加元素
            $("#citys").append("<li>" + name + "</li>");
            $("#citys").css('color', 'red')
        }
        if (select == 2) {
            var name = $('.word').val();
            $("#you").append("<li>" + name + "</li>");
            $("#you").css('color', 'red')

        }

    })

<script>